CSS布局之布局模型的示例分析

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

css是什么意思

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

在網頁中，元素有三種布局模型：
1、流動模型（Flow） 默認的
2、浮動模型 (Float)
3、層模型（Layer）

1、流動模型（Flow）

流動（Flow）模型是默認的網頁布局模式。也就是說網頁在默認狀態下的 HTML 網頁元素都是根據流動模型來分布網頁內容的。

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

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

（每一個便簽都顯示著自己本來默認的那個寬高）

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

2、浮動模型 (Float)

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

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

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

3、層模型（Layer）

層模型有三種形式：

1、相對定位(position: relative)

2、絕對定位(position: absolute)

3、固定定位(position: fixed)

相對定位

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

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

絕對定位

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

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

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

絕對定位使元素脫離文檔流，因此不占據空間 ，普通文檔流中元素的布局就當絕對定位的元素不存在時一樣，仍然在文檔流中的其他元素將忽略該元素并填補他原先的空間。因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其他元素。　　

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

固定定位

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

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

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

感謝你的閱讀，希望你對“CSS布局之布局模型的示例分析”這一關鍵問題有了一定的理解，具體使用情況還需要大家自己動手實驗使用過才能領會，快去試試吧，如果想閱讀更多相關知識點的文章，歡迎關注億速云行業資訊頻道！