CSS佈局之佈局模型

這次帶給大家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的位置去再定位

相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

如何解決layer.photos()非同步修改圖片位址後顯示異常的問題

##怎樣監聽angularJs清單資料是否渲染完畢

ES6的「類別」與物件導向的關係

以上是CSS佈局之佈局模型的詳細內容。更多資訊請關注PHP中文網其他相關文章！