Box model:
the box model is the cornerstone of css layout, it specifies how to display the page elements and relationships between elements.
css define all the elements can have a box-like shape and a planar space.
That contain content content area, padding padding (padding), border border, margin borders (margins) This is the box model.
Cassette Model:
1: to control the positional relationship between the parent and child elements;
2: for controlling the positional relationship between the elements and contents;
3: used to control the positional relationship between the siblings.
padding (fill):
. 1: padding between the content and the box, inside the box;
2: padding is to adjust the positional relationship in the sub-elements parent element inside;
3: Add the cassette will stretch padding value, if you want the box maintain the original size, need to lose the width and height values based on the padding;
. 4: padding can not be negative values;
. 5: padding will not impact on the background image;
6: if a box does not set a fixed width and height, add Save the padding is not;
7: padding value added to a single direction:
padding-left / right / Top / bottom :;
. 8: padding setting method:
padding: four weeks. 1 values
padding: 2 vertically and horizontally values
padding: th. 3 at about the value
padding: 4 Ge on the left and right values
margin (margins):
. 1: the box margin (element) external;
2: margin controlling the positional relationship between the sibling element;
. 3: margin width of the box itself does not affect high;
. 4: margin may be provided negative;
5: margin value is added to a single direction
margin-left / right / Top / bottom :;
. 6: margin setting method:
margin: four weeks. 1 values
margin: 2 or so values vertical
margin: lower values of about 3
margin: four lower right values of the left upper
7: margin: 0 auto; (let the current element which is centered about the parent element);
NOTE: bugs often appear margin:
a: when the parent element and the child element of the first set are not floating case, if the child element added to the first margin-top, the error will be added to the margin-top above the parent element.
b: the value of vertically adjacent margin between the two elements, do not stack, according to set maximum.
The position occupied by the standard box model consists of:
占有的宽度：width + padding-left/right + border-left/right + margin-left/right
Possession of height: height + padding-top / bottom + border-top / bottom + margin-top / bottom
