Css3 box-sizing attribute specifies the Box Model

Speaking of the IE bug, a notorious example is its explanation of the "Box Model" error: In ie5.x and IE6/7 in quirks mode
Border and padding are both included in width. This poses a lot of trouble for front-end engineers. There are several users who need to define the size of each box.
Do you have to think about it: Have you triggered the "Box Model bug "?

At the same time, because another browser complies with the standard, we also need to calculate when precisely defining a box displayed in a limited space: the space left for it is only that large, how much should we write the width of border and padding?

This situation has been improved in the css3 era, thanks to this attribute 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 standards we have previously recognized;

When defining box-sizing: border-box;, the browser interprets the box model as IE6;

Why is this attribute "too late? IE's interpretation of the box model does not comply with W3C specifications, but it also has its advantages: No matter how you change the border and padding values, it will not change the total size of the box, this will not disrupt the overall layout of the page. In FirefoxModern
In the browser, if we want to change the padding value, we have to recalculate the width of the box. Now IE6 is dead, and this CSS attribute is too late.

Use this new property. For Firefox, use-moz-box-sizing. For Safari/WebKit, use-WebKit-box-sizing. For opera, use box-sizing directly.

 

 

------

Enet power in Silicon Valley
> School Channel
> CSS design


This is a good place to learn.