好程式員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屬性

　　絕對定位

　　建立了以包含快為基準的定位

　　完全脫離了标準文檔流

　　絕對定位-偏移參考基準

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

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

　　絕對定位-未設定偏移量

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

　　脫離了标準文檔流

　　絕對定位-常見問題

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

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