Three ways of web page layout

First, the standard document flow.

1, from top to bottom, from left to right (block-level elements div, ul, li, dl, dt, p and line-level elements img, strong, input).

2. Box mode

Box model attributes: border, inner padding (top, right, bottom, left) (top, left, right, bottom) (top, bottom, left, right), outer margin (top, right, bottom, left) (top, left, right).

3. Three-dimensional model of box

Box 3d model level has a border; ; Content+padding; Background-img; Background color; Security deposit.

4. The size of the box model is equal to the box border+outer margin+inner margin+middle content size.

Second, floating floating.

Floating: left, right, none.

Clear float:

1, clearance: both; (usually used to clear the floating of the immediately following element).

2. At the same time, set the width: 1000% (fixed width)++overflow: hidden.

Note: The clear:both method is invalid when the parent contains a row. Generally, the second method of clearing floating is used.

Third, absolute positioning.

1, static positioning, 2, relative positioning, 3, absolute positioning.

Web page layout methods are:

1, one-column layout

Generally, the width and height are fixed, and the margin: 0 auto is set to the horizontal center, which is used to display prominent titles in the interface.

2. Two-column layout

Speaking of two-column layout, the most common one is to use float to realize it. The disadvantage of float floating layout is that it will cause text wrapping and other effects after floating, so it is necessary to clear the float in time.

Set the Zuo Zuo float, or set the left and right float. (This is to determine the width of the parent element)

3, three column layout

The width of both sides is fixed and the middle is adaptive. First, set the width of the parent element. You can set the float to the left or right. Then set margins in the middle to adjust the spacing. You can also set them all to float to the left, set margins and adjust spacing. Attention should also be paid to eliminating the influence of floating.