一、em和rem的区别
对于em和rem的区别一句话概括：em相对于父元素，rem相对于根（html默认16px）元素，推荐rem。
二、CSS3 @media 媒体查询的作用
可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
表示小于300px的时候会触发body的样式设置以下这种方式可以通过新建一个mobile.css来写移动端的布局，也就是说，响应式布局其实是相当于写了两套css代码，而媒体查询可以根据屏幕宽度选择用那一套布局
三、vh和vw
- vw : 1vw 等于视口宽度的1%
- vh : 1vh 等于视口高度的1%
- vmin : 选取 vw 和 vh 中最小的那个
- vmax : 选取 vw 和 vh 中最大的那个
四、弹性盒子flex
常用属性：
1.对空间的分配
2.flex-direction
指定了弹性子元素在父容器中的位置(垂直/水平)。
3.justify-content
属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐
4.align-items
设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式
5.flex-wrap
属性用于指定弹性盒子的子元素换行方式。
6.align-content
用于修改 flex-wrap 属性的行为。类似于 align-items, 但它不是设置弹性子元素的对齐，而是设置各个行的对齐
7.flex-basis
跟width有相同的功能
单独设置某个item的属性，用法和align-item一样
9.order
设置item的排列顺序
五、定位
子元素使用绝对定位的时候，给父元素一个相对定位，可以减少绝对定位的影响
六、动画
七、网格布局grid
1.grid-template-columns和grid-template-rows
属性规定网格布局中的列数（和宽度）/规定网格布局中的行数（和高度）。
2.grid-gap
定义网格布局中行与列之间间隙的尺寸
3.grid-auto-columns和grid-auto-rows
属性为网格容器中的列和行设置尺寸。(该属性只会影响未设置尺寸的行或列)
4.grid-row和grid-column
跨行和跨列（grid-column: 从那条网格线开始 / span 跨几列;）
5.grid-column-start和grid-column-end
表示从那条网格线开始，表示跨几列
6.repeat和minmax函数
其中，实现的关键代码就是下面这两行：
.container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
其中minmax(150px, 1fr)的含义是每一个列的宽度最小是150像素，最大是1fr，也就是等分宽度。