一、CSS布局的三種機制
1、網頁布局的核心——就是用CSS來擺放盒子位置
2、CSS提供了3種機制來設置盒子的擺放位置，分別是普通流、浮動和定位，其中：
①普通流（標准流）
②浮動：讓盒子從普通流中浮起來——讓多個盒子（div）水平排列成一行
③定位：將盒子定在某一個位置，自由的漂浮在其他盒子的上面——CSS離不開定位，特別是后面的js特效
二、為什么使用定位
1、小黃色塊在圖片上移動，吸引用戶的眼球
2、當我們滾動窗口的時候，盒子是固定屏幕某個位置的
結論：要實現以上效果，標准流或浮動都無法快速實現
3、定位：將盒子定在某一個位置，自由的漂浮在其他盒子（包括標准流和浮動）的上面
4、三種布局機制的上下順序：
標准流在最底層（海底）——浮動的盒子在中間層（海面）——定位的盒子在最上層（天空）
三、定位詳解
（一）、定位也是用來布局的，它有兩部分組成：
定位 = 定位模式 + 邊偏移
（二）、邊偏移
1、簡單說，我們定位的盒子，是通過邊偏移來移動位置的
2、在CSS中，通過top、bottom、left和right屬性定義元素的邊偏移：（方位名詞）
| 邊偏移屬性 | 示例 | 描述 |
| top | top:80px | 頂端偏移量，定義元素相對於其父元素上邊線的距離 |
| bottom | bottom:80px | 底部偏移量，定義元素相對於其父元素下邊線的距離 |
| left | left:80px | 左側偏移量，定義元素相對於其父元素左邊線的距離 |
| right | right:80px | 右側偏移量，定義元素相對於其父元素右邊線的距離 |
3、定位的盒子有了邊偏移才有價值，一般情況下，凡是有定位地方必定有邊偏移
（三）定位模式（position）
1、在CSS中，通過position屬性定義元素的定位模式，語法如下：
選擇器 {position: 屬性值; }
2、定位模式是有不同分類的，在不同情況下，我們用到不同的定位模式
| 值 | 語義 |
| static | 靜態定位 |
| relative | 相對定位 |
| absolute | 絕對定位 |
| fixed | 固定定位 |
（1）靜態定位（static）——了解
①靜態定位是元素的默認定位方式，無定位的意思，它相當於border 里面的 none，不要定位的時候用
②靜態定位按照標准流特性擺放位置，它沒有邊移量
③靜態定位在布局時我們幾乎不用的
（2）相對定位（relative）——重要
①相對定位是元素相對於它原來在標准流中的位置來說的
②相對定位的特點：
●相對於自己原來在標准流中位置來移動的
●原來在標准流的區域繼續占有，后面的盒子仍然以標准流的方式對待它
（3）絕對定位（absolute）——重要
①絕對定位是元素相對於他父級元素來設置的位置
●完全脫標——完全不占位置；
●父元素沒有定位，則以瀏覽器為准定位（Document文檔）
●父元素要有定位
○將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位；
②絕對定位的特點：（務必記住）
●絕對是以帶有定位的父級元素來移動位置，如果父級都沒有定位，則以瀏覽器文檔為准移動位置；
●不保留原來的位置，完全是脫標的
③定位口訣——子絕父相
子絕父相——子級是絕對定位，父級要用相對定位
④總結：
由於子元素，不占據位置，所以我們使用絕對定位；
由於父元素占據位置，不能影響后面元素的正常顯示，我們使用相對定位。
⑤分析：
●方向箭頭疊加在其他圖片上方，應該使用絕對定位，因為絕對定位完全脫標，完全不占位置；
●父級盒子應該使用相對定位，因為相對定位不脫標，后續盒子仍然以標准流的方式對待它；
○如果父級盒子也使用絕對定位，會完全脫標，那么下方的廣告盒子會上移，這顯然不是我們想要的。
⑥父級要占有位置，子級要任意擺放，這就是子絕父相的由來。
（4）固定定位（fixed）——重要
①固定定位是絕對定位的一種特殊形式：如果說絕對定位是一個矩形，那么固定定位就類似於正方形
●完全脫標——完全不占位置；
●只認瀏覽器可視窗口——瀏覽器可視窗口+邊偏移屬性 來設置元素的位置；
○跟父元素沒有任何關系；
○不隨滾動條滾動。
②提示：IE6等低版本瀏覽器不支持固定定位
四、定位（position）的拓展
1、絕對定位的盒子居中
（1）注意：絕對定位/固定定位的盒子 不能通過設置 margin: auto 設置水平居中
（2）在使用絕對定位時要想實現水平居中：
①left：50%; ：讓盒子的左側移動到父級元素的水平中心位置；
②margin-left：-100px; ：讓盒子向左移動自身寬度的一半。
2、堆疊順序（z-index）
（1）在使用定位布局時，可能會 出現盒子重疊的情況。
（2）加了定位的盒子，默認后來者居上，后面的盒子會壓住前面的盒子。
（3）應用 z-index 層疊等級屬性可以調整盒子的堆疊順序。
（4）z-index 的特性如下：
①屬性值：正整數、負整數或0，默認值是0，數值越大，盒子越靠上；
②如果屬性值相同，則按照書寫順序，后來居上；
③數字后面不能加單位。
（5）z-index 只能應用於相對定位、絕對定位和固定定位的元素，其他標准流、浮動和靜態定位無效。
3、定位改變display屬性
（1）行內塊的特性，一行可以有多個，可以設置高度和寬度，大小是受內容的影響。
①可以用 inline-block 轉換為行內塊；
②可以用浮動 float 默認轉換為行內塊（類似，並不完全一樣，因為浮動是脫標的）；
③絕對定位和固定定位也和浮動類似，默認轉換的特性 轉換為行內塊。
（2）一個行內的盒子，如果加了浮動、固定定位和絕對定位，不用轉換，就可以給這個盒子直接設置寬度和高度等。
（3）注意：
①浮動元素、絕對定位元素的都不會觸發外邊距合並的問題；（我們以前是用padding border overflow解決的）；
②也就是說，我們給盒子改為了浮動或者定位，就不會有垂直外邊距合並的問題了。
五、綜合演練
1、圓角矩形設置4個角
圓角矩形可以為4個角分別設置圓度，但是是有順序的
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-right-radius:20px;
border-bottom-left-radius:20px;
2、如果4個角，數值相同
border-radius：15px;
3、如果數值不同，我們也可以按照簡寫的形式，具體格式如下：
border-radius：左上角 右上角 右下角 左下角;
還是遵循的逆時針。
六、定位小結
1、
| 定位模式 | 是否脫標占有位置 | 移動位置基准 | 模式轉換（行內塊） | 使用情況 |
| 靜態static | 不脫標，正常模式 | 正常模式 | 不能 | 幾乎不用 |
| 相對定位relative | 不脫標，占有位置 | 相對自身位置移動 | 不能 | 基本單獨使用 |
| 絕對定位 | 完全脫標，不占有位置 | 相對於定位父級移動 | 能 | 要和定位父級元素搭配使用 |
| 固定定位fixed | 完全脫標，不占有位置 | 相對於瀏覽器移動位置 | 能 | 單獨使用，不需要父級 |
2、注意：
（1）邊偏移需要和定位模式聯合使用，單獨使用無效；
（2）top 和 bottom 不要同時使用；
（3）left 和 right 不要同時使用。
七、網頁布局總結
1、標准流：
可以讓盒子上下排列或者左右排列
2、浮動
可以讓多個塊級元素一行顯示或者左右對齊盒子，浮動的盒子就是按照順序左右排列
3、定位
定位最大的特點就是有層疊的概念，就是可以讓多個盒子前后疊壓來顯示，但是每個盒子需要測量數值。