Home > Developer > CSS

[One day learning a CSS3 attribute] One: box-sizing, css3box-sizing

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

[One day learning a CSS3 attribute] One: box-sizing, css3box-sizing

Box-sizing is used to change the CSS box model and change the calculation mode of element width and height.

The value of box-sizing is as follows:

box-sizing: content-box | padding-box | border-box

The default value is content-box, which corresponds to the standard box Model Calculation Method in CSS2.1 specifications. That is, width and height indicate the width and height of the content area, excluding the border, inner margin, and outer margin;

Padding-box according to the MDN statement, it is still an experimental attribute. width and height include the content area and padding, excluding the border and external data;

Border-box includes the padding and border, excluding the margin. This is the box model used by Quirks mode.

 

Example (from MDN) 
1 /* support Firefox, WebKit, Opera and IE8+ */2 3 .example {4   -moz-box-sizing: border-box;5        box-sizing: border-box;6 }
Impact on JS

According to MDN:

By window. box-sizing is not considered when getComputedStyle gets the height. At least Firefox 18 (bug 520992) and Internet Explorer 9 are like this, But Chrome 24 is not (not tested by other browsers ). note that IE9 currentStyle cannot return the correct height value.

I have not tested Firefox 18 or later versions.

Return values of. width () and. height () in jQuery

The support for box-sizing is added after jQuery 1.8, but this is also related to whether the browser supports box-sizing. In short, after jQuery 1.8 ,. width () and. height () always returns the width and height of the content area. See the following code:

<!DOCTYPE html> 

The result is as follows:


 
    
 
  
  • Internet Explorer 6/7: 500
    • 
 
  
  • IE8/9/10: 480
    • 
 
  
  • Safari5/6: 480
    • 
 
  
  • Chrome21/Firefox14: 480
    • 

 


IE6/7 does not support box-sizing, And the content area width is 500, so the output value is also 500. other browsers that support this attribute, the content area width minus the values of padding and border is changed to 480.


The. outerWidth () and. outerHeight () methods in jquery are not affected.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
one day in seconds calendar add one day one day date one day calendar template sunrise sunset one day xbox one s day one edition xbox one next day delivery
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Detailed four property value usages common in CSS Display pro...
In-depth analysis of css float attributes in webpage settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More