好程序員web前端培訓分享CSS基礎知識之position

好程序員web前端培訓分享CSS基礎知識之position

 

CSS定位機制

 

　　標準文檔流(Normal flow)

 

　　浮動定位(Floats)

 

　　絕對定位(Absolute positioning)

 

　　標準文檔流

 

　　從上到下，從左到右，輸出文檔內容

 

　　由塊級元素和行級元素組成

 

　　塊級元素

 

　　從左到右撐滿頁面，獨佔一行

 

　　觸碰到頁面邊緣時，會自動換行

 

　　常見的標籤有：div、ul、li、di、dt、p

 

　　行級元素

 

　　能在同一行內顯示

 

　　不會改變HTML文檔結構

 

　　常見的標籤有：input、span、label、strong、img

 

　　盒子模型

 

　　邊框(border)

 

　　外邊距(margin)

 

　　內邊距(padding)

 

　　盒子中的內容(content)

 

　　盒子模型尺寸=邊框+外邊距+內邊距+盒子中內容的尺寸

 

　　盒子3D模型

 

　　第一層：border

 

　　第二層：content + padding

 

　　第三層：background-image

 

　　第四層：background-color

 

　　第五層：margin

 

　　浮動定位

 

　　三個屬性：left(左浮動)、right(右浮動)、none(不浮動)

 

　　元素會左移、或右移、直到碰到容器爲止

 

　　仍處於標準文檔流中

 

　　清除浮動的經常使用方法

 

clear屬性，經常使用clear:both;(當父包含塊縮成一條時無效)

 

　　同時設置width:100%(或固定寬度)+overflow:hidden;

 

　　相對定位

 

　　相對於自身原有位置進行偏移

 

　　仍處於標準文檔流中

 

　　隨即擁有偏移屬性和z-index屬性

 

　　絕對定位

 

　　創建了以包含快爲基準的定位

 

　　徹底脫離了標準文檔流

 

　　隨即擁有偏移屬性和z-index屬性

 

　　絕對定位-偏移參考基準

 

　　無已定位祖先元素，覺得偏移參考基準

 

　　有已定位祖先元素，以距其最近的已定位祖先元素爲偏移參考基準

 

　　絕對定位-未設置偏移量

 

　　不管是否存在已定位的祖先元素，都保持在元素初始位置

 

　　脫離了標準文檔流

 

　　絕對定位-常見問題

 

　　沒有設置寬度時，元素的寬度根據內容進行調節

 

　　左右佈局時，柱子層的高度，必定要大於絕對定位元素的高度