Position布局型別 FLOW流動型別

2021-10-09 12:33:27 字數 856 閱讀 2039

flow流動模型,是網頁的預設布局模式。也就是說網頁在預設狀態下的html的網頁元素都是根據流動模型來分布網頁內容的。

塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分布,因為在預設狀態下,塊狀元素的寬度都為100%,而事實上,塊狀元素都會以行的形式佔據位置。

這裡定義三個塊狀元素div分別修改了背景顏色為紅藍黃,可以非常容易的看出這三個元素預設為自上而下垂直分布。第乙個我沒有修改寬度width,所以頁面自動預設為100%。

在流動模型中內聯元素都會處在包含元素內從左往右水平分布顯示,內聯元素不會像塊狀元素那樣霸道的佔據一行,但是如果是流動模型中的塊狀元素中巢狀塊狀元素,嵌入的塊狀元素會預設瀏覽器的預設布局,呈自上而下垂直分布。

"div1"

>

內聯元素

內聯元素

內聯元素

"div2"

>

"">一級

"">二級

"">**

"div3"

>

內聯元素

內聯元素

內聯元素

position(定位)布局

屬性值 說明static 預設值。沒有定位,元素按照標準文件流布局 inherit 繼承父元素的position值 relative 相對定位,盒子的位置以標準文件流的排版方式為基準,然後相對於它原本的標準位置偏移,相對定位的盒子仍然在標準流中。absolute 絕對定位,盒子的位置以它最靠近的已經...

position定位布局

值 static 預設值,沒有定位,可以取消繼承的定位屬性 relative 相對定位,相對於元素自身在文件流的位置定位,不脫離標準流 absolute 絕對定位,相對於最近的乙個定位了的父元素,脫離標準流,不再佔據位置 fixed 固定定位,相對於瀏覽器視窗進行定位,脫離標準流,不再佔據位置 st...

CSS布局定位 position

取值 static absolute fixed relative static 預設值。無特殊定位 物件遵循html定位規則。absolute 絕對定位 將物件從文件流中拖出 可層疊 用left,right,top,bottom等屬性相對於其最接近的乙個最有定位設定的父物件進行絕對定位。如果不存在...