The understanding of CSS Web page layout method

one, standard flow (default state, element boxes in the order in which they appear in the document)

block-level elements -vertical typesetting display:block;

A single row, you can set the width height, the width default and the parent element width is consistent

General structural tags are block-level elements, such as Div,h,p,ul, etc.

inline Elements --horizontal typesetting display:inline-block;

Side-by-row with other elements, cannot set width height, width defaults to content width

General descriptive tags are inline elements, such as span,a,img, etc.

two, floating flow --Horizontal layout

left floating --float:left;

right floating --float:right;

Elements can float around, and when the outer border of the element encounters the outer border of another element, the element has a definite position

When the inclusion box width of a floating stream is not enough, the element moves downward, and the height of two floating elements is not the same, and may be stuck

three, Position flow (adjust position by top,bottom,left,right)

relative positioning --position:relative;

Top,bottom,left,right is the distance that the element moves relative to its position in the standard stream, regardless of whether it moves, the element still occupies its position in the standard stream , and the display may overwrite other elements

absolute positioning --position:absolute;

Top,bottom,left,right is the distance from the nearest positioned parent element that can overwrite other elements on the page, where the element does not occupy a position in the standard flow and does not affect the position of elements in the standard flow

Absolute positioning has an attribute z-index,z-index the larger the higher the upper

In general, the parent element uses relative positioning and the child element is absolutely positioned. The relative positioning of the parent element as a reference for absolute positioning of the child element.

Of course, this situation is not absolute, the parent element can also be set to absolute, the child element to find the non-static positioning of the parent element.

fixed positioning --positon:fixed;

The understanding of CSS Web page layout method