css--Layout model

1. Three layout models:

Mobile Model Flow

Float model Float

Layers Model Layer

2. Flow model:

Default layout mode.

Characteristics:

Block elements are spread vertically from top to bottom in the containing element, and the default block element has a width of 100% and occupies the position as a row.

Inline elements are displayed horizontally from left to right within the containing element, such as a, span, EM, strong.

3. Floating Model:

The way in which the block elements are displayed side-by.

Float:left, right

Xxx{float:left;}

4. Layer Model:

The way that elements are positioned precisely in a Web page.

> Three different forms:

Absolute positioning (absolute), relative positioning (relative), fixed positioning

1> Absolute Positioning:

Position:absolute

Leave the element out of the document flow, and then use the left, Righ, top, and bottom properties to absolutely locate the parent containing block that has the closest position property relative to it. If no such inclusion block exists, then relative to the body element, that is, relative to the browser window.

2> Relative positioning:

Position:relative

The offset of an element in the normal document stream is determined by attributes such as Lef. The upper-left corner is the origin of the coordinates.

The element is offset, but the position before the offset is left intact, overwriting the previous Div without the position before the offset.

3> Fixed positioning:

Position:fixed

Similar to absolute, but the coordinates of its relative movement are the view (the page window within the screen) itself.

Because the view itself is fixed, it does not change with the scroll bars of the browser window.

Unless you move the screen position of the browser window on the screen, or change the display size of the browser window, the anchored element is always located somewhere in the view in the browser window and is not affected by the flow of the document.

>relative and Absolute Combined: The parent element is Relative/absolute, and the anchor element uses absolute.

　　

css--Layout model