CSS的三種布局模式

一、總結

一句話總結：

CSS常見的三種布局模式有：流動模型（Flow）、浮動模型 (Float)、層模型（Layer）

 

 

1、流動布局模型 常見的特點？

（1）塊狀元素自上而下占行：塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據位置。

（2）行內元素從左到右：在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。

 

 

 

二、CSS的三種布局模式

轉自或參考：CSS的三種布局模式 - 簡書
https://www.jianshu.com/p/254c2ee3ad64

 

一，布局模型與盒模型一樣都是 CSS 最基本、 最核心的概念。在網頁中，元素有三種布局模型：
1，流動模型（Flow）
2，浮動模型 (Float)
3，層模型（Layer）
二，流動布局模型
流動布局模型具有兩個比較典型的特征：
（1）塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為100%。實際上，塊狀元素都會以行的形式占據位置。
（2）在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分布顯示。
三，浮動布局模型
任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。例：實現兩個 div 元素一行顯示

div{ width:200px; height:200px; border:2px red solid; float:left; //設置浮動 } <div id="div1"></div> <div id="div2"></div> 

效果圖：

 

 

image.png

四，層模型
（一）層模型有三種形式：
1、絕對定位(position: absolute)
2、相對定位(position: relative)
3、固定定位(position: fixed)
（二）絕對定位
設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器窗口。例：如下面代碼可以實現div元素相對於瀏覽器窗口向右移動100px，向下移動50px。

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

(三)相對定位
如果想為元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)，然后相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
那么問題來了，什么叫做“偏移前的位置保留不動”。例如下代碼，我們為<div>后添加添加一個p標簽

#div1{ width:200px; height:200px; border:2px red solid; } <div id="div1"></div> <p>測試什么叫做偏移前的位置保持不動</p> 

效果圖如下：<div>在頁面的左上角而<p>標簽在<div>的下面

 

 

image.png

當我們將<div>的位置實現相對於以前位置向下移動50px，向右移動100px之后再來觀察<p>標簽的位置；

#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div> <p>測試什么叫做偏移前的位置保持不動</p> 

效果圖如下：

 

 

image.png

發現什么了吧！！！
這就是“偏移前的位置保持不動”。
（三）固定定位
fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由於視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位於瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed;屬性功能相同。以下代碼可以實現相對於瀏覽器視圖向右移動100px，向下移動50px。並且拖動滾動條時位置固定不變。