百分比布局
也叫流式布局，效果：宽度自适应，高度固定（古老布局方式）
flex布局
是一种浏览器提倡的布局模型，加载起来快，可以避免浮动脱标问题，所以布局起来更简单灵活
flex兼容，可以在can i use里搜索哪些浏览器支持flex
设置方式：给父级添加display:flex,父级必须是最近的上一级， 组成结构：父元素叫弹性容器，子元素叫弹性盒子，x轴为主轴，y轴为侧轴（交叉轴），默认情况下弹性盒子沿着主轴在水平方向排列。
修改主轴的对齐方式属性：justify-content,它有以下属性值
flex-start 默认值，起点开始依次排列。 flex-end 终点开始依次排列。
center: 沿主轴居中排列。
space-around: 弹性盒子沿主轴均匀排列，空白间距均分在弹性盒子两侧。
space-between: 弹性盒子沿主轴均匀排列，空白间距均分在相邻盒子之间。
space-evenly: 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等。
侧轴对齐方式：align-items
flex-start 默认值，起点开始依次排列。 flex-end 终点开始依次排列。
center: 沿侧轴居中排列。
stretch:默认值，弹性盒子沿着主轴线被拉伸至铺满容器
改变主轴方向： flex-direction
row: 行，水平方向（默认值）
column: 列，垂直方向
row-reverse: 行，从右向左
column-reverse: 列，从下向上
换行： flex-warp: warp
易混淆属性：align-content 当弹性容器指定高度且子项为多行时，align-content: center将子项作为一个整体，不管有多少行你只看整个弹性盒子占了多少高度，然后让它在父容器中居中，单行设置了flex-warp也可以生效。
rem适配
rem相对单位，是相对于html标签字号计算的
html {
font-size: 10px;
}
.box {
width: 10rem;
height: 8rem;
background-color:aqua
}
宽：100px/10px = 10rem， 高：80px/10px = 8rem
媒体查询
/* 媒体查询 根据不同视口宽度，设置不同的根字号 一般将网页分为10等份，将跟字号设置为视口宽度的1/10 */
@media (width: 320px) {
html {
font-size: 32px;
}
}
@media (width: 375px) {
html {
font-size: 37.5px;
}
}
一般情况下不需要我们自己手动配置媒体查询，可以搜索flexible.js，手淘开源出来的适配移动端的js框架，下载下来引用就可以。
vw/vh适配
相对视口的尺寸计算结果
vw: viewport width 1w = 1/100视口宽度
vh:viewport height 1vh = 1/100视口高度
