[CSS Notes 7] CSS Layout Model

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定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。

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

九、relative和absolute组合使用

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：

1、参照定位的元素必须是相对定位元素的前辈元素：

<p id="box1"><!--参照定位的元素--> <p id="box2">相对参照元素进行定位</p><!--相对定位元素--> </p>

从上面代码可以看出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; }

这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。

 以上就是【CSS笔记七】CSS布局模型的内容，更多相关内容请关注PHP中文网（www.php.cn）！