Visual Formatting (CSS Ultimate South essay)

The visual formatting of a document is divided into two parts.

The rendered formatted and horizontally oriented rendering formatting in the vertical direction.

The rendering of the document is based on the CSS box model.

The CSS box model is external blank, inside and outside of content, inside and out. The width and Height properties are set to the size of the content area. The background color and picture have been covered by the border under the booth. The value of the external blank margin can be negative, and the other cannot be negative.

Some concepts need to be popularized before starting:

Include Block:

The element's parent element is called the containing block of this element

Block-level elements

Block-level elements produce a break after the front. Block-level element exclusive row

In-line elements

Inline elements do not create a line break

Replace element

Elements such as input in img,form belong to replaceable elements. These expressions are just placeholders for the images that will be loaded to occupy the position.

　　

A block-level element automatically stretches the fill containing the block. The horizontal direction above margin padding border width and equals the width of the containing block. If width is known, margin is set to auto. Then margin is automatically set to equal two values, and the sum is inclusive block width. Use this method to achieve horizontal centering of elements. Text-align is only useful for inline elements in block-level elements.

The height of a block-level element is determined based on the level of the content. The high margin auto is automatically 0.

The folding of margin.

Horizontal formatting:

When the inline element is set to Margin,padding,border, the vertical direction does not affect the height. The horizontal direction affects the width.

　　　　

The basic concept of popularization

Row Height: Fong-size plus leading is line height.

Line box:

EM box: Every word is an EM box.

Anonymous box: An element without a label.

The padding,margin,border of an inline element does not affect the line height or space occupied by the element.

Setting the Display element

The default box for the element is modified.

　　

Visual Formatting (CSS Ultimate South essay)