最近在慕課網學習了 網頁佈局基礎 和 固定層效果 ，都是由聲音甜美的 婧享人生 老師所錄製，視頻詳細講解了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屬性
絕對定位-偏移參考基準
- 未設置偏移量時，無論是否存在已定位的祖先元素，都保持在元素初始位置
- 已設置偏移量時，無已定位祖先元素，以爲偏移參考基準
- 已設置偏移量時，有已定位祖先元素，以距其最近的已定位祖先元素爲偏移參考基準
絕對定位-常見問題
- 沒有設置寬度時，元素的寬度根據內容進行調節
- 左右佈局時，柱子層的高度，一定要大於絕對定位元素的高度
固定定位（也屬於絕對定位）
- 位置固定，不會隨滾動條變化
- 被他遮蓋的元素，可以從其下層穿過
固定定位-偏移參考基準
- 未設置偏移量時，無已定位祖先元素，以瀏覽器窗口爲基準定位
- 未設置偏移量時，有已定位祖先元素，以祖先元素爲基準定位
- 已設置偏移量時，無論是否存在已定位的祖先元素，均以瀏覽器窗口爲基準定位
歡迎來到 石佳劼的博客，如有疑問，請在「原文」評論區 留言，我會盡量爲您解答。
