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

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)漢臺(tái)免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

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

流動(dòng)模型（Flow）

浮動(dòng)模型 (Float)

層模型（Layer）

流動(dòng)模型

流動(dòng)模型，流動(dòng)（Flow）是默認(rèn)的網(wǎng)頁(yè)布局模式。

流動(dòng)布局模型具有2個(gè)比較典型的特征：

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

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

浮動(dòng)模型

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

層模型

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

層模型有三種形式：

絕對(duì)定位(position: absolute)

相對(duì)定位(position: relative)

固定定位(position: fixed)

絕對(duì)定位(position: absolute)

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

相對(duì)定位(position: relative)

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

簡(jiǎn)單來說，就是相對(duì)元素原來的位置進(jìn)行移動(dòng)，元素本身所占的位置會(huì)保留。

固定定位(position: fixed)

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

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

參照定位的元素必須是相對(duì)定位元素的前輩元素

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

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

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

當(dāng)前名稱：CSS中布局模型是什么
網(wǎng)站路徑：http://chinadenli.net/article4/gsgjoe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站設(shè)計(jì)、域名注冊(cè)、全網(wǎng)營(yíng)銷推廣、企業(yè)網(wǎng)站制作、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)