本文小編為大家詳細(xì)介紹“CSS層模型的形式有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“CSS層模型的形式有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

專業(yè)從事成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站,高端網(wǎng)站制作設(shè)計(jì),小程序開發(fā),網(wǎng)站推廣的成都做網(wǎng)站的公司。優(yōu)秀技術(shù)團(tuán)隊(duì)竭力真誠服務(wù)，采用H5高端網(wǎng)站建設(shè)+CSS3前端渲染技術(shù)，響應(yīng)式網(wǎng)站設(shè)計(jì)，讓網(wǎng)站在手機(jī)、平板、PC、微信下都能呈現(xiàn)。建站過程建立專項(xiàng)小組，與您實(shí)時(shí)在線互動，隨時(shí)提供解決方案，暢聊想法和感受。

在網(wǎng)頁中，元素有三種布局模型：

1、流動模型（Flow）默認(rèn)的

2、浮動模型(Float)

3、層模型（Layer）

1、流動模型（Flow）

流動（Flow）模型是默認(rèn)的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的HTML網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的。

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

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

（每一個(gè)便簽都顯示著自己本來默認(rèn)的那個(gè)寬高）

第二點(diǎn)，在流動模型下，行內(nèi)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。（內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨(dú)占一行）

2、浮動模型(Float)

任何元素在默認(rèn)情況下是不能浮動的，但可以用CSS定義為浮動

div{float:left;}div{float:right;}

可以為不同的div設(shè)置不同的浮動方式來布局。

3、層模型（Layer）

層模型有三種形式：

1、相對定位(position:relative)

2、絕對定位(position:absolute)

3、固定定位(position:fixed)

相對定位

如果想為元素設(shè)置層模型中的相對定位，需要設(shè)置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。

相對于以前的位置移動，偏移前的位置保留不動。在使用相對定位時(shí)，就算元素被偏移了，但是他仍然占據(jù)著它沒偏移前的空間。

絕對定位

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

被設(shè)置了絕對定位的元素，在文檔流中是不占據(jù)空間的，如果某元素設(shè)置了絕對定位，那么它在文檔流中的位置會被刪除；

我們可以通過z-index來設(shè)置它們的堆疊順序。

絕對定位使元素脫離文檔流，因此不占據(jù)空間，普通文檔流中元素的布局就當(dāng)絕對定位的元素不存在時(shí)一樣，仍然在文檔流中的其他元素將忽略該元素并填補(bǔ)他原先的空間。因?yàn)榻^對定位的框與文檔流無關(guān)，所以它們可以覆蓋頁面上的其他元素。

浮動元素的定位還是基于正常的文檔流，然后從文檔流中抽出并盡可能遠(yuǎn)的移動至左側(cè)或者右側(cè)，文字內(nèi)容會圍繞在浮動元素周圍。它只是改變了文檔流的顯示，而沒有脫離文檔流，理解了這一點(diǎn)，就很容易弄明白什么時(shí)候用定位，什么時(shí)候用浮動了。

固定定位

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

#div1{

position:fixed;

bottom:0;

right:0

}(始終在屏幕由下端有一個(gè)div框，會一直跟著滾動條走)

相對定位可以和絕對定位混著使用原則是：只要父div定義了定位屬性，子div就會跟著父div的位置去再定位

讀到這里，這篇“CSS層模型的形式有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實(shí)踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。