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
3 圣杯布局
三个都float
后边一个跑到前边一个前边 margin-left
中间区域设置padding,左右两端设置相对定位
\
4 rem布局
5 百分比布局
6 响应式布局
1 根据屏幕尺寸的改变,改变网页的排版布局
2 媒体查询
@media 设备 and (区间范围) and (区间范围)
\
7 其他方式
绝对定位
弹性盒
\