CSS Visual format model (CSS Mastery essay)

When CSS renders a page, consider each document element as a box.

CSS Box model

Margin,padding,border, content.

Margin will appear margin folded. The margin of the upper and lower elements is collapsed. Left and right do not fold. The marign between the contained elements is also collapsed. The advantage of margin folding is that the document is neatly formatted.

Each element will have a box. There are two types of this box. Block-level elements of the block box, inline elements within the inline box.

Line box: There is also the concept of a line box, where the height of the row box is determined by the middle tallest inline box. Setting the height, padding, margin of the inline box does not affect the height of the row box. The height of the line box line-height to set the row height.

Anonymous box. Anonymous box is not easy to set style (: First-line)

　　

There are three rendering models of CSS.

Natural document flow, position, float.

float: Floating element out of document flow. Can float on the left and float right. Floating out of the document stream, block elements ignore floating elements, natural typography, however, the elements inside the block element are unaware of the floating existence of the text elements around the floating layout. You can use clear to clear the float.

The parent element height of the float element is 0.

1, add label, clear float.

2,overflow

3, parent element float

The 4,after element.

Postion

Relative: Also in the natural flow, the position offset in the relative natural flow.

Absolute: In the natural flow, the relative position is set to the ancestor element of relative,absolute,fixed, if not the initial containing block.

Fixed: Relative window positioning.

CSS Visual format model (CSS Mastery essay)