基本布局
- 絕對布局
- 主內容隨頁面寬度，固定邊欄
- 缺點：瀏覽器變寬的時候，頁腳可能會遮住邊欄，同時瀏覽器變寬后，主內容區和邊欄的比例會不協調。
- 表格顯示布局
- 使用table標簽，隨窗口縮放
- 缺點：對于語義化不利
- 浮動布局
- 一側固定寬度浮動，一側添加外邊距
- 缺點：同樣來自頁面變寬的挑戰
- 凝膠布局
- 主內容區建立后，設置左右margin為0
- 缺點：對于頁面的利用率不充足
- 其他布局
盒子模型
- 關于邊框折疊
兩個垂直外邊距相遇時，會碰到一起，即便是元素嵌套也不例外進行折疊，試試一些特殊情況：
- 上面的div有20px的邊距，下面的有10px的邊距，此時折疊，依然是20px的邊距。但是如果此時把下面的元素設置為float，那么兩者的邊框不會折疊。
- 考慮這種情況，一個元素嵌套一個元素，此時依然是折疊的，但如果此時為外邊的元素設置了邊框，那么內外元素邊距不折疊
2.box-sizing的用法
選擇器優先級
特定性
- 分三個位置，選擇器包含id，第一位加一，第二個位置為class，偽類。第三個位置為元素名，一個元素名加一，最后按照結果大小排序，對于依然沖突的規則，按照先后順序，后出現的覆蓋之前的
