CSS box model in detail
The box model is divided into IE box model and W3C standard box model
1. What is the difference between w3c box model and IE box model?
W3c standard box model:
The width and height attributes only contain the content of the content, not the border and padding
Width is just the width of the content, plus the padding and border, and the content is the same width
Ie box model:
The width, height attributes contain the border and padding, and refer to content+padding+border
Set width to be the width of content+padding+border. Add border and padding to make content smaller
Which box model to use in IE8 + can be controlled by box-sizing. The default is Content-box, which is the standard box model, or ie box model if box-sizing is set to border-box. If the DOCTYPE is missing in IE6, 7, and 8, ie mode is triggered. In the current W3C standard box sizing can be switched freely.
When writing code, use the standard W3C model (which requires declaring DOCTYPE types in pages) to avoid multiple browser incompatibations on the same page.
Because if you don’t declare DOCTYPE, IE will interpret the box model as IE box model and Firefox will interpret it as W3C box model. If a DOCTYPE is declared on a page, all browsers interpret the box model as the W3C box model
\