What are the css layout models? Introduction to the three layout models of css

This article brings you what are the css layout models? The introduction of the three CSS layout models has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Flow model (flow)

Default web page layout mode
* Block elements will be vertically extended and distributed in order from top to bottom within the containing element
* Inline elements will be displayed horizontally from left to right within the containing element

Floating model (float)

Any element cannot be displayed by default Floating, but can be defined with CSS as a floating

两个 div 元素一行
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    float:left;
    }
 <div id="div1"></div>
<div id="div2"></div>

设置两个元素 右浮动 实现一行 
float:right;
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    float:right;
    }

设置两个元素一左一右
div{
    width:200px;    
    height:200px;    
    border:2px red solid;
    }
#div1{float:left;}
#div2{float:right;}

layer Model (layer)

There are three forms of layer models:
- Absolute positioning (position: absolute)
- Relative positioning (position: relative)
- Fixed positioning (position: fixed)

The layer layout model is like the very popular layer editing function in the image software PhotoShop. Each layer can be accurately positioned and operated

1. Absolute positioning

position:absolute (meaning absolute positioning), the function of this statement is to drag the element out of the document flow, and then use left, right, top, The bottom property is positioned absolutely relative to its nearest parent containing block that has a positioning property. If no such containing block exists, it is relative to the body element, that is, relative to the browser window.

实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    position:absolute;    
    left:100px;    
    top:50px;
    }
    <div id="div1"></div>

2. Relative positioning

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

相对于以前位置向下移动50px，向右移动100px;
#div1{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    position:relative;    
    left:100px;    
    top:50px;
    }
<div id="div1"></div>

3. Fixed positioning

fixed: indicates fixed positioning, similar to absolute positioning type. But the coordinates of its relative movement are the view (the 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 certain position of the view within the browser window that will not be affected by the flow of the document. This has the same function as the background-attachment:fixed; attribute.

相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
    width:200px;   
     height:200px;    
        border:2px red solid;   
        position:fixed;    
        left:100px;    
        top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> 
....

4. Use Relative in combination with Absolute

Position relative to other elements

1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>box1是box2的父元素

2、参照定位的元素必须加入position:relative;
#box1{
    width:200px;    
    height:200px;    
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{
    position:absolute;    
    top:20px;    
    left:30px;         
}

Related recommendations ：

CSS Layout Holy Grail Layout & Double Flying Wing Layout_html/css_WEB-ITnose

css div layout (1) - css div implements table Layout_html/css_WEB-ITnose

CSS layout layout model

The above is the detailed content of What are the css layout models? Introduction to the three layout models of css. For more information, please follow other related articles on the PHP Chinese website!