What is the box model?
All page elements are seen as a box, it has:
content，padding，border，margin
Four properties, this is the box model.
Box model comes in two forms: a standard box model, weird box model
First, two modes can be performed using a box-sizing property choose:
Standard mode: box-sizing: content-box;
Quirks mode: box-sizing: border-box;
The difference between the two modes:
padding the standard mode is set distraction, and quirks mode is equivalent to the size of the fixed box, and then is loaded in the cassette. Size of the box and will not be softened padding.
Example:
.box{
box-sizing: border-box; // not added when calculated according to the standard mode, when the odd mode is added in accordance with the parsing
width:200px;
height:200px;
border:2px solid black;
padding:50px;
margin:50px;
}
Standard mode: box total width / height = SUMMARY Width / Height + padding + border + margin. effect:
Quirks mode: box total width / height = width / height + margin. effect:
