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

This article is about what the layout model is in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

CSS 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)

Flow model

Flow model, flow (flow) is the default page layout mode.

The flow layout model has two typical characteristics:

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

Under the flow model, inline elements are displayed horizontally from left to right within the containing element.

Floating model

Any element cannot float by default, but it can be defined as a float using CSS. Example: # div1 {float:left;}

Layer model

CSS defines a set of positioning attributes to support the layer layout model.

There are three forms of layer models:

Absolute positioning (position: absolute)

Relative positioning (position: relative)

Fixed positioning (position: fixed)

Absolute positioning (position: absolute)

If you want to set absolute positioning in the layer model for an element, you need to set position:absolute (for absolute positioning), which drags the element out of the document flow, and then uses the left, right, top, and bottom attributes to position absolutely relative to its nearest parent inclusion block with positioning attributes. If such an inclusion block does not exist, it is relative to the body element, that is, to the browser window.

Relative positioning (position: relative)

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. 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.

To put it simply, it moves relative to the original position of the element, and the position occupied by the element itself is retained.

Fixed positioning (position: fixed)

Set up the position:fixed;. 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 in the browser window somewhere in the view, will not be affected by document flow, which is the same as the background-attachment:fixed; property function.

When Relative is used in combination with Absolute, the following specifications must be followed:

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

Reference positioning elements must be added to the position:relative

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

Thank you for reading! This is the end of this article on "what is the layout model in CSS?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.