Understanding of css webpage layout and css webpage Layout

Understanding of css webpage layout and css webpage Layout

1. Standard stream(By default, the element boxes are arranged in the order displayed in the document)

Block-level elements-- Vertical layout display: block;

For a single row, you can set the width and height. The width is consistent with the width of the parent element by default.

Generally, structural tags are block-level elements, such as div, h, p, ul, etc.

Line Element-- Horizontal layout display: inline-block;

It is a row side by side with other elements. The width and height cannot be set. The width is the content width by default.

Generally, descriptive tags are all intra-row elements, such as span, a, and img.

2. Floating stream-- Horizontal layout

Float left-- Float: left;

Right float-- Float: right;

The element can float left and right. When the outer border edge of the element encounters the outer border of another element, the element has a definite position.

When the width of the floating stream's contained box is insufficient, the elements move down. The height of the two floating elements is different and may be stuck.

3. Locate the stream(Adjust the position through top, bottom, left, right)

Relative positioning-- Position: relative;

Top, bottom, left, and right are the distances between the elements and their positions in the standard stream,The element still occupies its position in the standard streamThe display may overwrite other elements.

Absolute Positioning-- Position: absolute;

Top, bottom, left, and right are the distances between moving relative to the nearest located parent element and can overwrite other elements on the page,Elements do not occupy a position in the standard streamDoes not affect the position of elements in the standard stream.

Absolute positioning has a z-index attribute. The larger the z-index, the higher it is displayed.

In general, the parent element adopts relative positioning, and the child element adopts absolute positioning. The parent element is used as a reference object for absolute positioning of child elements.

Of course, this situation is not absolute. The parent element can also be set to absolute. The child element is a non-static parent element.

Fixed positioning -- positon: fixed;