Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What are the forms of the CSS layer model

2025-01-18 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

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

In this article, the editor introduces in detail "what is the form of the CSS layer model", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what is the form of the CSS layer model" can help you solve your doubts.

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

1. Flow model (Flow) default

2. Floating model (Float)

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

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.

The positioning of the floating element is still based on the normal document flow, then extracted from the document flow and moved as far as possible to the left or right, and the text content surrounds the floating element. It only changes the display of the document stream, but does not deviate from the document stream, and with this understanding, it is easy to figure out when to use positioning and when to float.

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 scrollbar of the browser window unless you move the screen position of the browser window or change the display size of the browser window, so the fixed positioning element will always be located somewhere in the view of the browser window and will not be affected by the flow of the document.

# div1 {

Position:fixed

Bottom:0

Right:0

} (there is always a div box at the bottom of the screen, which will always follow the scroll bar)

The principle that relative positioning can be mixed with absolute positioning is that as long as the parent div defines the positioning attribute, the child div will relocate according to the position of the parent div.

After reading this, the article "what is the form of the CSS layer model" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more related articles, you are 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.

Views: 0

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report