(border-box) The difference between box model w3c and IE

Mainly look at the advantages, disadvantages and applicable scenarios of these two box models

One, the difference

Box model: Content, padding, margin, border;

The content section of the standard W3C box model contains no other sections.
The content section of the IE box model contains borders and paddings.(IE 6- uses its own model, IE6,7 are weird, 8+ has been synchronized with W3C)

Difference:

• IE's width = border + padding + content (ie: fixed width, adding border or padding will squeeze content inward)
• W3C (standard box model) width = content

With a code comparison demonstration, it is obvious!

content-box (default)
border-box

 

Second, the pros and cons of standard box and IE box

The advantage of standard boxes is that they match the width and height of human-defined elements, but IE boxes are more suitable for layouts and forms.There is a common scenario, such as two divs, each accounting for 50%. Obviously, if you set padding border margin, these two divs will not be on one line.So IE boxes are more suitable for layout.Currently css3 has a property box-sizing that can set the box model category of div.As follows:

box-sizing: conteng-box (standard) | border-box (IE) | inherit