CSS中布局模型是什么

這篇文章給大家分享的是有關CSS中布局模型是什么的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

CSS 包含 3 種基本的布局模型，用英文概括為：Flow、Layer 和 Float。 在網(wǎng)頁中，元素有三種布局模型：

流動模型（Flow）

浮動模型 (Float)

層模型（Layer）

流動模型

流動模型，流動（Flow）是默認的網(wǎng)頁布局模式。

流動布局模型具有2個比較典型的特征：

塊狀元素 都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認狀態(tài)下，塊狀元素的寬度都為 100%。實際上，塊狀元素都會以行的形式占據(jù)位置。

在流動模型下，內(nèi)聯(lián)元素 都會在所處的包含元素內(nèi)從左到右水平分布顯示。

浮動模型

任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動。例子：#div1{float:left;}

層模型

CSS 定義了一組定位（positioning）屬性來支持層布局模型。

層模型有三種形式：

絕對定位(position: absolute)

相對定位(position: relative)

固定定位(position: fixed)

絕對定位(position: absolute)

如果想為元素設置層模型中的絕對定位，需要設置 position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用 left、right、top、bottom 屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于 body 元素，即相對于瀏覽器窗口。

相對定位(position: relative)

如果想為元素設置層模型中的相對定位，需要設置 position:relative（表示相對定位），它通過 left、right、top、bottom 屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按 static(float) 方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

簡單來說，就是相對元素原來的位置進行移動，元素本身所占的位置會保留。

固定定位(position: fixed)

設置 position:fixed;。fixed：表示固定定位，與 absolute 定位類型類似，但它的相對移動的坐標是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響，這與 background-attachment:fixed; 屬性功能相同。

Relative 與 Absolute 組合使用,必須遵守下面規(guī)范：

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

參照定位的元素必須加入 position:relative;

定位元素加入 position:absolute，便可以使用 top、bottom、left、right 來進行偏移定位了

感謝各位的閱讀！關于“CSS中布局模型是什么”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！