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

This article mainly explains "how to use the css3 layout model". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use the css3 layout model.

There are three kinds of css3 layout models: 1, flow model (Flow), which is the default web layout mode; 2, floating model (Float), controlled by float attributes; 3, layer model (Layer), which has three forms: "relative positioning", "absolute positioning" and "fixed positioning".

The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS3 contains three basic layout models, which are summarized in English as Flow, Layer and Float.

In a web page, there are three layout models for elements:

Flow model (Flow)

Floating model (Float)

Layer model (Layer)

1. Flow model (Flow)

The Flow model is the default page layout mode. In other words, the HTML page elements in the default state of the web page are all distributed according to the flow model.

The flow layout model has two typical characteristics:

First, block elements are distributed vertically from top to bottom within the containing element, because by default, block elements are 100% wide. In fact, block elements occupy positions in the form of rows.

(each note shows its default width and height.)

Second, under the flow model, the in-line elements are displayed horizontally from left to right within the containing element. (inline elements do not dominate a line like block elements.)

2. Floating model (Float)

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

Div {float:left;} div {float:right;}

You can set different floating methods for different div to layout.

3. Layer model (Layer)

There are three forms of layer models:

1. Relative positioning (position: relative)

2. Absolute positioning (position: absolute)

3. Fixed positioning (position: fixed)

Relative positioning

If you want to set the relative positioning in the layer model for an element, you need to set position:relative (for relative positioning), which determines the offset position of the element in the normal document flow through the left, right, top, and bottom attributes.

Relative to the previous position, the position before the offset remains unchanged. When using relative positioning, even if the element is offset, it still occupies the space before it is offset.

.div1 {width: 100px; height: 100px; border: 1px solid red;} .div2 {width: 100px; height: 100px; border: 1px dashed blue; position: relative; top: 100px; left: 100px;}

The use of blue virtual boxes to indicate that the 100px is set using relativ,top and left respectively means that the element has been moved down and to the right by 100 pixels relative to the original position, that is, the original position of the element is 100 pixels on the upper left of the current position.

Absolute positioning

If you want to set absolute positioning in the layer model for an element, you need to set position:absolute (for absolute positioning), drag the element from the document flow, and then use the left, right, top, and bottom attributes to position absolutely relative to its nearest parent inclusion block with positioning attributes.

If there is no such inclusion block (that is, the div in front of it does not set the positioning attribute), it is relative to the body element, that is, to the browser window.

An element that is set to absolute positioning does not occupy space in the document stream. If an element is set to absolute positioning, its position in the document stream will be deleted.

We can set their stacking order through z-index.

Absolute positioning takes the element away from the document stream, so it does not occupy space. The layout of the element in the ordinary document stream is the same as when the absolutely positioned element does not exist, and other elements still in the document stream will ignore the element and fill its original space. Because absolutely positioned boxes are independent of the document flow, they can override other elements on the page.

.div1 {width: 300px; height: 300px; background: red; position: absolute; top: 100px; left: 100px;}

What I set here is top and left, so the positioning property at this time takes the upper-left corner of the browser as the origin, similarly, if you set top and right, it takes the upper-right corner of the browser as the origin, and the rest is the same.

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 does not change with the scroll bar of the browser window.

.div1 {width: 100%; height: 10000px; border: 1px solid red;} .div2 {width: 100px; height: 100px; border: 1px dashed blue; position: fixed; top: 100px; left: 100px;}

The fixed position does not change with the scroll bar.

Combined use of RELATIVE and ABSOLUTE

Rules:

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

two。 Reference positioning elements must be added to the position:relative

3. The positioning element is added to the position:absolute; using top,left,right,bottom to offset.

Thank you for your reading, the above is the content of "how to use the css3 layout model". After the study of this article, I believe you have a deeper understanding of how to use the css3 layout model, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.