好程式設計師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 屬性

 

　　絕對定位 - 偏移參考基準

 

　　無已定位祖先元素，以為偏移參考基準

 

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

 

　　絕對定位 - 未設定偏移量

 

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

 

　　脫離了標準文件流

 

　　絕對定位 - 常見問題

 

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

 

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