[Learn one CSS3 property a day] One: box-sizing_html/css

[Learn one CSS3 property a day] One: box-sizing_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:52:48

Original

1000 people have browsed it

box-sizing is used to change the CSS box model, thereby changing the way the element width and height are calculated.

The value of box-sizing is as follows:

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

Copy after login

The default value is content-box , which corresponds to the standard box model calculation method in the CSS2.1 specification , that is, width and height are the width and height of the content area, excluding borders, inner margins, and outer margins;

padding-box According to MDN, it is still an experimental attribute at present, and width and height include Content area and padding, excluding borders and margins;

border-box includes padding and borders, excluding margins. This is the box model used by IE Quirks mode.

Example (excerpted from MDN)

1 /* support Firefox, WebKit, Opera and IE8+ */2 3 .example {4   -moz-box-sizing: border-box;5        box-sizing: border-box;6 }

Copy after login

Impact on JS

According to MDN:

Box-sizing will not be considered when getting height by window.getComputedStyle, at least this is the case in Firefox 18 (bug 520992) and Internet Explorer 9, but not in Chrome 24 (other browsers have not been tested). Note that IE9 currentStyle cannot return the correct height value.

I have not tested Firefox 18 and IE9 and later versions.

About the return values of .width() and .height() in jQuery

JQuery 1.8 has added support for box-sizing, but this also depends on whether the browser supports box- Regarding sizing, in short, after version 1.8, .width() and .height() will always return the width and height of the content area, see the following code:

<!DOCTYPE html> <html>     <head>         <meta charset="UTF-8"/>         <style type="text/css">            #container {                 -moz-box-sizing: border-box;                 box-sizing: border-box;                 width: 500px;                 padding: 5px;                 border: 5px solid gold;             }         </style>         <script src="js/jquery-1.8.0.js"></script>     </head>     <body>         <div id="container"></div>         <script>             var $el = $('#container')             var w = $el.width();             console.log(w)         </script>     </body>    </html>

Copy after login

The printing results of each browser are as follows

IE6/7: 500

IE8/9/10: 480

Safari5/6: 480

Chrome21 /Firefox14: 480

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

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