常见页面布局
一列布局、二列布局、三列布局
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；}
版权声明：本文为cuishuangshuang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。