Foreword
css all html tags are as different types of boxes. css is a set of operating rules and style of display box. Rule to multi-css developers are not remember, to grasp the core concepts of what line and what later just fine.
Box type
1, a block element (block)
The default behavior of the normal flow of the page: 1, from top to bottom. 2, before and after generating a line break. 3, by default inherit the parent node width. 4, can be explicitly set the width and height.
2, row element (inline)
The default behavior: distraction by the width and height of the content, will be wrapped (wrapped in English does not) when the width exceeds the width of the parent node.
3, the inner block row (inline-block)
The default behavior: support width and height, before and after the line break is not generated,
Note: There is a space between the line-block in the source code, then honey gap will appear in the display of the browser.
New types css3 flex like requires a separate portion. Here, only three kinds of the box portion 2. css3 is expanding in css2, and before the rules have not changed.
Properties box
All the boxes have these attributes. Only one caveat. Inline elements (inline) active set does not support the width and height.
padding: padding, within the border.
margin: margins, outside the border.
border: the border of the box.
width: the width of the inner region.
Width of the box (width + padding + margin + border)
Specify the behavior of the width
1, the width of the set width property only of the width of the box content.
2, the addition level is set for the width of the box and the inner and outer border attribute value margins can stretch box.
Behavior does not specify the width
css for all properties in all boxes have default settings. width property value is not specified width of the box is auto. What is the width: the default behavior of auto.
block: 1, the same as always expand to the width of the parent element. 2, the inner and outer margins will add content element region, which is to reduce the width of the width. = + Reduce the amount of horizontal frame level inside and outside the margin;
inline-block: the same block behavior.
inline: distraction by the content.
