1. CSS layout model
After clarifying the basic concepts and box model types of the CSS box model, we can delve into the basic model of web page layout. The layout model, like the box model, is the most basic and core concept of CSS. But the layout model is based on the box model and is different from what we often call CSS layout styles or CSS layout templates. If the layout model is the foundation, then the CSS layout template is the end, the external expression.
CSS contains 3 basic layout models, summarized in English as: Flow, Layer and Float.
In web pages, elements have three layout models:
1. Flow model (Flow)
2. Floating model (Float)
3. Layer model (Layer)

2 , Flow model 1
Let’s talk about the flow model first. Flow 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 will occupy their position in the form of rows.

3. Flow model 2
Second point, under the flow model, inline elements will be displayed horizontally from left to right within the containing element. (Inline elements are not as overbearing as block elements and occupy one line.)

4. Floating model
Block elements are so overbearing that they occupy one line. If now we want two block elements to be displayed side by side, How to do it? Don't worry, setting the element to float can achieve this wish.

Any element cannot be floated by default, but it can be defined as floating using CSS. Elements such as p, p, table, img, etc. can be defined as floating. The following code can display two p elements in one line.

p{ width:200px; height:200px; border:2px red solid; float:left; } <p id="p1"></p> <p id="p2"></p>

Of course, you can also set two elements to float right at the same time to achieve one-line display.

p{ width:200px; height:200px; border:2px red solid; float:right; }

Can one row be displayed by setting two elements, one left and one right? Of course you can:

p{ width:200px; height:200px; border:2px red solid; } #p1{float:left;} #p2{float:right;}

5. What is the layer model
What is the layer layout model? 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. However, in the field of web design, layer layout has not been popular due to the mobility of web page sizes. However, there are still advantages to using layer layout locally on a web page. Let's learn about the layer layout in html.

How to accurately position html elements in web pages, just like the layers in the image software PhotoShop, each layer can be accurately positioned and operated. CSS defines a set of positioning properties to support the layer layout model.

The layer model has three forms:

1. Absolute positioning (position: absolute)

2. Relative positioning (position: relative)

3. Fixed positioning (position: fixed)

6. Layer model: 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). This statement Drag the element out of the document flow, and then use the left, right, top, and bottom attributes to absolutely position it relative to its closest parent containing block with a positioning attribute. If no such containing block exists, it is relative to the body element, that is, relative to the browser window.

The following code can move the p element 100px to the right and 50px downward relative to the browser window.

p{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <p id="p1"></p>

7. Layer model: relative positioning
If you want to set the relative positioning in the layer model for an element, you need to set position:relative (indicating relative positioning), which uses the left, right, top, and bottom attributes. Determines the offset position of an element within 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.

The following code moves 50px downward and 100px to the right relative to the previous position;

#p1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <p id="p1"></p>

What is "the position before the offset remains unchanged"?

You can do an experiment and write some text in the span tag. The following code:

<body> <p id="p1"></p><span>偏移前的位置還保留不動，覆蓋不了前面的p沒有偏移前的位置</span> </body>

Although the p element is offset relative to its previous position, the previous position of the p element is still retained, so the subsequent span element is displayed behind the previous position of the p element.

八、層模型：固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。以下代碼可以實(shí)現(xiàn)相對于瀏覽器視圖向右移動100px，向下移動50px。并且拖動滾動條時位置固定不變。

#p1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } 
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> ....

九、relative和absolute組合使用

使用position:absolute可以實(shí)現(xiàn)被設(shè)置元素相對于瀏覽器（body）設(shè)置定位以后，大家有沒有想過可不可以相對于其它元素進(jìn)行定位呢？答案是肯定的，當(dāng)然可以。使用position:relative來幫忙，但是必須遵守下面規(guī)范：

1、參照定位的元素必須是相對定位元素的前輩元素：

<p id="box1"><!--參照定位的元素--> <p id="box2">相對參照元素進(jìn)行定位</p><!--相對定位元素--> </p>

從上面代碼可以看出box1是box2的父元素（父元素當(dāng)然也是前輩元素了）。

2、參照定位的元素必須加入

position:relative; #box1{ width:200px; height:200px; position:relative; }

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進(jìn)行偏移定位了。

#box2{ position:absolute; top:20px; left:30px; }

這樣box2就可以相對于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設(shè)置了）。

?以上就是【CSS筆記七】CSS布局模型的內(nèi)容，更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)（www.miracleart.cn）！