布局的方式有那些：
1.伸缩布局 flex
2.流式布局 百分比 非固定像素，内容向两侧填充
3.响应布局 媒体查询 （超小屏设备的时候：流式布局）
共同点：元素只能做宽度的适配（排除图片）
适配方案rem：宽度和高度都能做到适配（等比缩放）
4.rem布局
通过控制html上的字体大小去控制页面上所有已rem为单位的基准值控制尺寸
4.1 把页面上px单位转换成rem单位
4.2 页面制作的时候 psd 上的量取的px转成rem使用
4.3 怎么换算？？？预设一个基准值 方便计算100px
4.4 适配的时候设置基准值 320px 50px怎么算：（640px 100px
===320px 50px）
4.5 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度
4.6 怎么去改变 （js换算，媒体查询推荐）
flex：1 平均分布
首先是用有 display: flex;父级 然后是每个元素flex:1
flex-direction属性决定主轴的方向（即项目的排列方向）
flex-direction:row | row-reverse | column |column-reverse;
动画速度：
1.ease 先快后慢 最后非常慢
2.linear 匀速
3.ease-in 速度越来越快
4.ease-out 速度越来越慢
5.ease-in-out 速度先快后慢
以上五种动画速度是比较特殊，其实他们都是由 贝塞尔曲线 来的
视觉窗口：viewport,是移动端特有。这是一个虚拟的区域，承载网页的。
<meat name="viewport">设置视口的标签
防止内容溢出，不出现滚动条，提供用户体验
box-sizing:border-box;
两栏布局小技巧
.左侧{
foat:left;
width: 100px;
height: 100px;
background: pink;
}
.右侧{
/*让这个元素绝对绝缘 bfc*/
/*不让其他浮动元素影响自己*/
/*不让自己的浮动去影响别的元素*/
overflow: hidden;
}