CSS布局模型

weakish 發(fā)布于2019-04-23 11:58 / 1674人閱讀

摘要：在流動模型下，內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示。內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行浮動模型塊狀元素這么霸道都是獨占一行，如果現(xiàn)在我們想讓兩個塊狀元素并排顯示，怎么辦呢不要著急，設(shè)置元素浮動就可以實現(xiàn)這一愿望。

1、流動模型（Flow）

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

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

　　　　　　（1）塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布，因為在默認(rèn)狀態(tài)下，塊狀元素的寬度都為100%。

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

2、浮動模型（Float）

　　　　塊狀元素這么霸道都是獨占一行，如果現(xiàn)在我們想讓兩個塊狀元素并排顯示，怎么辦呢？不要著急，設(shè)置元素浮動就可以實現(xiàn)這一愿望。

　　　　任何元素在默認(rèn)情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。

　　　　　　float: left，向左浮動；

　　　　　　float: right，向右浮動

　　　　　　float: none，不浮動

　　　　　　float: inherit，從父元素繼承float屬性值

3、層模型（Layer）

　　　　層布局模型讓每個圖層能夠精確定位操作，但在網(wǎng)頁設(shè)計領(lǐng)域，由于網(wǎng)頁大小的活動性，層布局沒能受到熱捧。

　　　　層模型有三種形式：

　　　　（1）絕對定位(position: absolute)

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

　　　　（2）相對定位(position: relative)

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

　　　?。?）固定定位(position: fixed)

　　　　　　fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標(biāo)是視圖（屏幕內(nèi)的網(wǎng)頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。以下代碼可以實現(xiàn)相對于瀏覽器視圖向右移動100px，向下移動50px。并且拖動滾動條時位置固定不變。