常见页面布局

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；}