Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use the CSS3 attribute box-sizing, which is very detailed and has a certain reference value. Friends who are interested must finish it!

Box-sizing is used to change the CSS box model, thus changing the way the width and height of elements are calculated.

The values of box-sizing are 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 specification, that is, width and height are the width and height of the content area, excluding borders, inner and outer margins.

Padding-box, according to MDN, is currently an experimental attribute. Width and height include content areas and inner margins, excluding borders and outer data.

Border-box includes the inner margin and the border, but not the outer margin. This is the box model used by the IE weird pattern (Quirks mode).

Example (excerpt from MDN)

/ * support Firefox, WebKit, Opera and IE8+ * /

.example {

-moz-box-sizing: border-box

Box-sizing: border-box

}

Impact on JS

According to MDN:

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

I haven't tested Firefox 18 and later versions of IE9.

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

Box-sizing support has been added since jQuery version 1.8, but it also depends on whether the browser supports box-sizing. In short, after version 1.8, .width () and .height () always return the width and height of the content area, as shown in the following code:

# container {

-moz-box-sizing: border-box

Box-sizing: border-box

Width: 500px

Padding: 5px

Border: 5px solid gold

}

Var $el = $('# container')

Var w = $el.width ()

Console.log (w)

The print 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, and 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 subtracts the values of padding and border to 480.

Also: the .outerWidth () and .outerHeight () methods in jquery are not affected.

The above is all the content of the article "how to use CSS3 attribute box-sizing". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.