What are the three methods of web page layout?

The three methods of web page layout are: 1. Standard document flow; 2. Floating; 3. Absolute positioning. Among them, absolute positioning is completely separated from the standard document flow, establishing positioning based on the containing block, and has offset attributes and z-index attributes.

##Related learning recommendations: Website production video tutorial

Three ways of web page layout:

1: Standard document flow

1. From top to bottom and from left To the right (block-level elements [div, ul, li, dl, dt, p] and row-level elements [hanging plate, img, strong, input])

2. Box model

1) Box model attributes:

border,

inner margin padding [(top, right, bottom, left) (top, left, left, bottom) (top, bottom, left)], outer edge Distance margin [(upper, right, lower, left) (upper, left, right, lower) (upper, lower, left and right)].

3. Box 3D model

1) Box 3D model level

1, border;

2, content padding;

3. background-img;

4. background-color;

5. margin;

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

Two: floating float

float: left, right, none

Clear float:

1, clear: both; (Generally used to clear floating elements immediately behind)

2. Also set width: 1000% (fixed width) overflow: hidden;

Note: (When the parent contains a quick shrink to one , using clear: both methods are invalid; generally use the second method of clearing floats)

Three: Absolute positioning

1 Static positioning 2 Relative positioning 3 Absolute positioning

The above is the detailed content of What are the three methods of web page layout?. For more information, please follow other related articles on the PHP Chinese website!