1.實現單欄式布局
- 一欄布局
- 一欄式布局（優(yōu)化）
- 一欄式布局（通欄）
- 小BUG解決辦法：
1. 給body或者是通欄的div添加min-width
2. 給不是通欄的div添加max-width
2.實現三欄式布局
3.實現圣杯布局
- 圣杯布局
- 圣杯布局有個BUG劲厌，就是當縮放瀏覽器沒有達到2*nav+footer的寬度時寥袭，布局結構會破壞，掉盒子
- 原因是nav盒子的負margin是以ct父盒子的內容寬度做為值，當瀏覽器縮放導致ct的盒子寬度比nav盒子的main還小時，就會出現布局結構破壞
4.實現雙飛翼布局
-
雙飛翼布局
- 關鍵點是在main里嵌套盒子作左右margin纬朝，ct父盒子的內容不會像圣杯布局一樣被padding減小凑术，最后導致瀏覽器縮放應該布局結構
