這篇“CSS布局之布局模型的示例分析”除了程序員外大部分人都不太理解，今天小編為了讓大家更加理解“CSS布局之布局模型的示例分析”，給大家總結(jié)了以下內(nèi)容，具有一定借鑒價(jià)值，內(nèi)容詳細(xì)步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望大家通過這篇文章有所收獲，下面讓我們一起來(lái)看看具體內(nèi)容吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：域名申請(qǐng)、網(wǎng)頁(yè)空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、資陽(yáng)網(wǎng)站維護(hù)、網(wǎng)站推廣。

css是什么意思

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言，主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式，使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言，并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)級(jí)聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁(yè)，也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

在網(wǎng)頁(yè)中，元素有三種布局模型：
1、流動(dòng)模型（Flow） 默認(rèn)的
2、浮動(dòng)模型 (Float)
3、層模型（Layer）

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

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

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

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

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

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

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

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

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

可以為不同的div設(shè)置不同的浮動(dòng)方式來(lái)布局。

3、層模型（Layer）

層模型有三種形式：

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

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

3、固定定位(position: fixed)

相對(duì)定位

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

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

絕對(duì)定位

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

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

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

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

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

固定定位

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)影響。

#div1{
position:fixed;
    bottom:0;
    right:0
}  (始終在屏幕由下端有一個(gè)div框，會(huì)一直跟著滾動(dòng)條走)

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

感謝你的閱讀，希望你對(duì)“CSS布局之布局模型的示例分析”這一關(guān)鍵問題有了一定的理解，具體使用情況還需要大家自己動(dòng)手實(shí)驗(yàn)使用過才能領(lǐng)會(huì)，快去試試吧，如果想閱讀更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！