day20

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 其他方式

绝对定位

弹性盒