1、一列布局
（1）通欄佈局
直接利用塊狀元素獨佔一行和預設寬度100%的特性實現
（2）居中佈局
div {width：1200px；height：500px；margin：0 auto；}
（3）全屏佈局
第一種：div {height：100vh；}
第二種：html，body {height：100%}；div {height：100%}
2、兩列布局
（1）兩列自適應
設定兩個div都加浮動，他們的寬度都使用%獲取vw
（2）一列固定一列自適應
第一種：固定的側邊欄標籤在前，自適應的主體內容標籤在後
<aside></aside>
<main></mian>
側邊欄在左
aside {width：300px；height：500px；float：left；}
main {height：800px；margin-left：300px；}
側邊欄在右
aside {width：300px；height：500px；float：right；}
main {height：800px；margin-right：300px；}
第二種：自適應的主體內容標籤在前，固定的側邊欄標籤在後
<main></mian>
<aside></aside>
側邊欄在左
aside {float：left；width：300px；height：500px；margin-left：-100%；}
main {float：left；width：100%；height：800px；box-size：border-box；padding-left：300px；}
側邊欄在右
aside {float：left；width：300px；height：500px；margin-left：-300px；}
main {float：left；width：100%；height：800px；box-size：border-box；padding-right：300px；}
3、三列布局
兩列固定一列自適應
（1）固定側邊欄標籤在前，自適應主體內容標籤在後
<div class="l"></div>
<div class="r"></div>
<div class="c"></div>
.l {float：left；width：200px；height：300px；}
.r {float：right；width：400px；height：500px；}
.c {margin-left：200px；margin-right：400px；}
（2）自適應主體內容標籤在前，固定側邊欄標籤在後
<div class="c"></div>
<div class="l"></div>
<div class="r"></div>
.l {float：left；width：200px；height：300px；margin-left：-100%；}
.r {float：；width：400px；height：500px；margin-left：-400px}
.c {float：left；width：100%；height：100px；box-size：border-box；padding-left：200px；padding-right：400px；}