CSS box model, and CSS3 's box-sizing new properties

The CSS box model contains the content (element itself), padding (padding), Border (border), and margin (margin).

, the browser console elements computed can clearly display the element box model, the mouse is more dynamic to understand: (blue area represents the content element itself, here is the contents of the entire window)

There are two types of box models: Standard mode and weird mode. In <! Doctype> when the declaration is missing, it triggers the weird mode under IE6, IE7, IE8

Standard mode: box total width/height = content + padding + border + margin,content Width/height does not contain other parts (content's wide height is the Blue part)

weird mode: box total width/height = content + margin,content width/height contains border and padding portions (content's wide height is the Red Line portion)

Therefore, the width of border, padding, and margin should be considered when calculating the width of the element.

The width of the element affects the margin, padding: The box has no width, border, padding, margin of the situation will be different!

1. An element that does not have a width (width= "Auto") will always expand until it fills the width of its parent element. Adding border, margin, padding causes the content width to decrease and the width of the reduction to be the sum of the three.

2, the width of the box to add border, margin, padding, will lead to wider box expansion. The Width property of a box is just the breadth of the box's content area, not the horizontal width the box occupies.

For ease of calculation, CSS3 new attribute box-sizing can also set the width of the box to No width (width= "auto") state behavior

Box-sizing:content-box, Border-box, inherit;

Content-box: Parsing into standard mode (default mode)

Border-box: Parsing into weird mode

Inherit: Inherit Box-sizing property value from parent element

CSS box model, and CSS3 's box-sizing new properties