Box model
In fact, css on three modules: a box model, float, positioning, and the rest are details. These three modules must learn very proficient.
The nature of the layout of the page: the page elements such as text and graphics, etc., into the process inside the box, and then placed in a box with CSS, is the page layout.
1. box border (border)
grammar:
border: border-width || border-style || border-color
border-width: thickness of the border
boder-style: style, solid line, dashed, dotted, etc.
Shorthand:
border / border-top: width style color
2. inner margins (padding)
Padding: the distance between the border and content
padding-top:
padding-right:
padding-bottom:
padding-left:
padding: 10px; SUMMARY border distance x, y respectively 10px
pading: on the right lower left (clockwise)
Note: padding will make the box larger
3. Margin (margin)
Written with padding
4. Let the box centered
margin: Auto 0; / * vertical is about 0 Auto * /
margin way to turn auto, which side blank.
2 writing:
margin: auto
3 wording:
margin-right: auto;
margin-left: auto;
As long as the block-level element, and has a wide, holding auto around the line.
5. Margin merger
1) Vertical distance outside the adjacent elements were combined: In whichever is greater.
2) nested elements combined vertical margins ( margins collapse ):
Two block elements nested relationship, if the parent element is not on the borders and padding, the parent element from the outside will be the upper outside from the sub-elements of merger,
Outside the combined distance of the larger of the two.
solution:
1. The parent element may be defined on the inner border or the border 1px (padding-top: 1px);
2. Can the parent element to add overflow: hidden.
note:
Width attribute and the height of the box width 1. property applies to (block element), inline element is not valid (IMG and input) except.
2. if the width is not given a box width / height or inherit parent element / height, the padding does not affect the size of the box.
6. box layout stability
Stability descending order: width> padding> margin