What are the CSS layout models? Introduction to CSS three layout models

What this article brings to you is about the CSS layout model. CSS three layout model of the introduction, there is a certain reference value, the need for friends can refer to, I hope to help you.

Mobile Model (flow)

Default page layout mode
* Block elements will be vertically extended from top to bottom within the containing element in the order they are located
* Inline elements are displayed horizontally from left to right within the containing element where they are located

Floating model (float)

Any element is not floating by default, but it can be defined as floating by CSS

Two DIV elements one row div{    width:200px;        height:200px;        BORDER:2PX Red Solid;        Float:left;    } <div id= "Div1" ></div><div id= "Div2" ></div>

Set two elements right floating implementation one line float:right;div{    width:200px;        height:200px;        BORDER:2PX Red Solid;        Float:right;    }

Set two elements one left and one right div{    width:200px;        height:200px;        BORDER:2PX red Solid;    } #div1 {float:left;} #div2 {float:right;}

Layers Model (layer)

Layer models in three different forms:
-Absolute Positioning (Position:absolute)
-Relative positioning (position:relative)
-Fixed positioning (position:fixed)

The layer layout model is like a very popular layer editing feature in Photoshop, where each layer can precisely position the operation

1. Absolute positioning

Position:absolute (for absolute positioning), the effect of this statement is to drag the element out of the document stream, and then use the left, right, top, and bottom properties to be absolutely positioned relative to its closest parent containing block with a positional property. If no such inclusion block exists, then relative to the body element, that is, relative to the browser window.

Implement a DIV element to move 100px to the right relative to the browser window and move the 50px down. div{    width:200px;        height:200px;        BORDER:2PX Red Solid;        Position:absolute;        left:100px;        top:50px;    }    <div id= "Div1" ></div>

2. Relative positioning

Position:relative (for relative positioning), which determines the offset of an element in the normal document stream through the left, right, top, and bottom properties. Relative positioning is done by first generating an element as static (and the element floats like a layer), and then moving relative to the previous position, the direction and amplitude of the move is determined by the left, right, top, bottom properties, and the position before the offset remains fixed.

Move 50px down relative to the previous position, move 100px to the right; #div1 {    width:200px;        height:200px;        BORDER:2PX Red Solid;        position:relative;        left:100px;        top:50px;    } <div id= "Div1" ></div>

3. Fixed positioning

Fixed: Represents a pinned position, similar to the absolute anchor type, but its relative movement coordinates 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, so the anchored element is always located somewhere in the view in the browser window and is not affected by the flow of the document. This is the same as the Background-attachment:fixed property function.

Move the 100px to the right relative to the browser view and move the 50px down. And the position is fixed when you drag the scroll bar. #div1 {    width:200px;        height:200px;            BORDER:2PX Red Solid;           position:fixed;            left:100px;            top:50px;} <p> text-Text text-text-text-text-text-text text-text-text-text text-text-text-text-text-text-text-text-text-text-text-text text-text text-Text textual text text </p> ....

4.Relative combined with absolute

Positioning relative to other elements

1. The reference positioning element must be the predecessor element of the relative positioning element: <div id= "Box1" ><!--Reference positioned element--    <div id= "Box2" > Relative reference element positioning </div ><!--Relative positioning element--></div>box1 is the parent element of Box2

2, the reference positioning elements must join position:relative; #box1 {    width:200px;        height:200px;        position:relative;        }

3, positioning elements to join Position:absolute, you can use top, bottom, left, right to offset positioning. #box2 {    position:absolute;        top:20px;        left:30px;         }