[CSS] CSS box model

(1) There are two box models: IE box model (border-box), W3C standard box model (content-box)
(2) Box model: divided into content, padding, margin, Border (border) four parts

The difference between the IE box model and the W3C standard box model:

(1) W3C standard box model: attributes width and height only contain content, not border and padding
(2) IE box model: attributes width and height include content, border and padding, which refers to content
+ padding + border.

Which box model to use in ie8+ browsers can be controlled by box-sizing (a new CSS attribute), the default value is content-box, which is the standard box model; if box-sizing is set to border-box, IE is
used box model. If the DOCTYPE is missing in ie6, 7, 8, the box model will be interpreted as the IE
box model. If the DOCTYPE type is declared in the page, all browsers will interpret the box model as the W3C box model.

Guess you like

Origin blog.csdn.net/weixin_50836184/article/details/124719052