Understand the Box Model

Div + CSS has two box models

Standard W3C Box Model

IE Box Model

How to enable the browser to process according to the standard box model is to add the doctype Declaration on the top of the webpage. If the doctype statement is not added, Each browser will understand the webpage based on its own behavior.

In the standard box model, width and height indicate the width and height of the content area. Increasing the padding, border, and margin does not affect the size of the content area, however, the total size of the element box is increased. In IE 6, the width is not the width of the content, but the total width of the content, padding, and border.

In fact, the box model of IE is more reasonable. W3C is aware of this problem and it is impossible to redefine the box model. Therefore, in css3, there are two optional values: Box-sizing, one is the default content-box and the other is border-box. If the latter is selected, the box model will be processed in IE6 mode.