CSS 3 Tutorial: Understanding the box-sizing property
Author：Eve Cole
Update Time：2009-06-12 17:54:27
Speaking of IE bugs, a notorious example is its incorrect interpretation of the "box model": in IE5.x and IE6/7 in Quirks mode, both border and padding are included in width. This adds a lot of trouble to the work of front-end engineers. Every box that needs to define a size must be considered: Is it triggering a "box model bug"?
At the same time, due to the compliance of another group of browsers to standards, when we accurately define a box displayed in a limited space, we also need to calculate: the space left for it is only so large. Excluding the border and padding, we should What is its width written in?
This situation has improved in the CSS3 era, thanks to this property called box-sizing, which has two values "content-box" and "border-box".
When defining box-sizing: content-box;, the browser's interpretation of the box model follows the W3C standard we recognized before;
When box-sizing: border-box; is defined, the browser's interpretation of the box model is the same as IE6;
Why is this attribute said to be "late"? Although IE's interpretation of the box model does not comply with W3C specifications, it also has its advantages: no matter how you change the values of border and padding, it will not cause the total size of the box to change, and it will not disrupt the overall layout of the page. In modern browsers such as Firefox, if we want to change the value of padding, we have to recalculate the width of the box. Now that IE6 is dead, this CSS property is a bit long overdue.
To try this new property, please use -moz-box-sizing for Firefox, use -webkit-box-sizing for Safari/WebKit, and just use box-sizing for Opera.
