1 列表布局
float+margin实现，注意点：父元素不能存在width
结构伪类选择器实现
弹性盒实现
多列实现：瀑布流
网格实现：电子相册
设置网格 display:grid/inline-grid
设置列宽度 grid-templete-columns:repeat(列数，宽度)
设置行高度 grid-templete-rows:repeat(行数，高度)
设置单元格的间距 grid-gap
划分区域 grid-templete-areas
子元素指定对应区域 grid-area
2 双飞翼布局
三个都float
后边一个跑到前边一个前边 margin-left
中间区域设置 margin
<div class="main">
<div class="center" ></div>
</div>
<div class="left"></div>
<div class="right"></div>
3 圣杯布局
三个都float
后边一个跑到前边一个前边 margin-left
中间区域设置padding，左右两端设置相对定位
<div class="main">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
4 rem布局
5 百分比布局
6 响应式布局
1 根据屏幕尺寸的改变，改变网页的排版布局
2 媒体查询
@media 设备 and （区间范围） and （区间范围）
<link rel="stylesheet" href="路径" media="and()区间">
7 其他方式
绝对定位
弹性盒
