CSS layout layout model

This time I will bring you the layout model of CSS layout. What are the precautions of CSS layout model? Here is a practical case, let’s take a look.

In web pages, elements have three layout models:
1. Flow model (Flow) Default
2. Float model (Float)
3. Layer model (Layer)

1. Flow model (Flow)

The flow (Flow) model is the default web page layout mode. That is to say, the HTML web elements of the web page in the default state distribute the web page content according to the flow model.

The fluid layout model has two typical characteristics:

First, the block elements will be vertically extended and distributed in order from top to bottom within the containing element, because in By default, the width of block elements is 100%. In fact, block elements all occupy positions in the form of rows.

(Each sticky note displays its original default width and height)

Second point, under the flow model, inline elements will move from left to right within the containing element. Horizontal distribution display. (Inline elements are not as dominant as block elements occupying a line)

2. Floating model (Float)

Any element cannot float by default. But it can be defined as floating using CSS

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

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

3. Layer model (Layer)

The layer model has three forms:

1. Relative positioning (position: relative)

2, Absolute positioning(position: absolute)

3. Fixed positioning(position: fixed)

Relative positioning

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

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

Absolute positioning

If you want to set the absolute positioning in the layer model for an element, you need to set position:absolute (indicating absolute positioning), drag the element out of the document flow, and then use left, The right, top, and bottom attributes are absolutely positioned relative to their closest parent containing block with a positioning attribute. If there is no such containing block (that is, the div in front of it does not have a positioning attribute set), it will be relative to the body element, that is, relative to the browser window.

Elements that are set to absolute positioning do not occupy space in the document flow. If an element is set to absolute positioning, its position in the document flow will be deleted;

We can set their stacking order through z-index.

Absolute positioning makes the element out of the document flow, so it does not occupy space. The layout of the element in the ordinary document flow is the same as when the absolutely positioned element does not exist. Other elements still in the document flow will ignore the element and Fill his former space. Because absolutely positioned boxes are independent of document flow, they can cover other elements on the page.​

The positioning of the floating element is still based on the normal document flow, and then extracted from the document flow and moved as far as possible to the left or right side, and the text content will surround the floating element. It only changes the display of the document flow, but does not break away from the document flow. Understanding this, it is easy to figure out when to use positioning and when to use floating.

Fixed positioning

fixed: Indicates fixed positioning, similar to the absolute positioning type, but its relative movement coordinates are the view (web page window within the screen) itself. Since the view itself is fixed, it will not change as the scroll bar of the browser window scrolls, unless you move the screen position of the browser window on the screen, or change the display size of the browser window, so fixedly positioned elements will always be in A position within the view within the browser window that is not affected by the flow of the document.

#div1{
position:fixed;
    bottom:0;
    right:0
}  (始终在屏幕由下端有一个div框，会一直跟着滚动条走)

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

I believe after reading these cases You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to solve the problem of abnormal display after layer.photos() asynchronously modifies the image address

How Monitor whether the angularJs list data has been rendered

The relationship between ES6 "classes" and object-oriented

The above is the detailed content of CSS layout layout model. For more information, please follow other related articles on the PHP Chinese website!