Shulou(Shulou.com)06/01 Report--

Editor to share with you what the css layout model is, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to understand it!

Flow model (flow)

Default page layout mode

* Block elements are vertically distributed in order from top to bottom within the containing element.

* inline elements are displayed horizontally from left to right within the containing element

Floating model (float)

Any element cannot be floated by default, but can be defined as floating with CSS

Two div elements on one line

Div {

Width:200px

Height:200px

Border:2pxredsolid

Float:left

}

Effect picture

Set two elements to float to the right to implement one line

Float:right

Div {

Width:200px

Height:200px

Border:2pxredsolid

Float:right

}

Write the picture description here.

Set two elements, one left and one right

Div {

Width:200px

Height:200px

Border:2pxredsolid

}

# div1 {float:left;}

# div2 {float:right;}

Effect picture

Layer model (layer)

There are three forms of layer model:

-absolute positioning (position:absolute)

-relative positioning (position:relative)

-fixed positioning (position:fixed)

The layer layout model is like a very popular layer editing function in the image software PhotoShop, and each layer can be accurately located.

1. Absolute positioning

Position:absolute (for absolute positioning), the purpose of this statement is to drag the element out of the document flow and then use the left, right, top, and bottom attributes to position absolutely relative to the nearest parent inclusion block with the positioning attribute. If such an inclusion block does not exist, it is relative to the body element, that is, to the browser window.

Implement that the div element moves 100px to the right and 50px down relative to the browser window.

Div {

Width:200px

Height:200px

Border:2pxredsolid

Position:absolute

Left:100px

Top:50px

}

Effect picture

two。 Relative positioning

Position:relative (for relative positioning), which determines the offset position of the element in the normal document stream through the left, right, top, and bottom attributes. The process of relative positioning is to first generate an element according to static (float) (and the element floats like a layer), and then moves relative to the previous position, the direction and amplitude of movement are determined by the left, right, top, bottom attributes, and the position before offset remains unchanged.

Move 50px down relative to the previous position, move 100px to the right

# div1 {

Width:200px

Height:200px

Border:2pxredsolid

Position:relative

Left:100px

Top:50px

}

Effect picture

3. Fixed positioning

Fixed: stands for fixed positioning, similar to the absolute positioning type, but its relative moving coordinates are the view itself (the web page window on the screen). Because the view itself is fixed, it will not change with the scroll bar of the browser window, unless you move the screen position of the browser window in the screen, or change the display size of the browser window, so the fixed positioning element will always be located somewhere in the view within the browser window and will not be affected by document flow, which is the same function as the background-attachment:fixed orientation property.

Move 100px to the right and 50px down relative to the browser view. And the position is fixed when you drag the scroll bar.

# div1 {

Width:200px

Height:200px

Border:2pxredsolid

Position:fixed

Left:100px

Top:50px

}

Text.

....

Combined use of 4.Relative and Absolute

Position relative to other elements

1. The reference positioning element must be the predecessor of the relative positioning element:

Position relative to the reference element

Box1 is the parent element of box2

2. Elements located by reference must be added to position:relative.

# box1 {

Width:200px

Height:200px

Position:relative

}

3. If the positioning element is added to position:absolute, you can use top, bottom, left, and right for offset positioning.

# box2 {

Position:absolute

Top:20px

Left:30px

}

The above is all the content of the article "what is the css layout Model?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.