动画类型
在动画类型中，除了linear step等方式以外还有以逐帧动画（让动画进行阶跃式变化而不是两个状态）
flex布局
只要设置了flex布局浮动定位全部失效
弹性布局是控制容器的项目在容器中是怎么排列的 横向的轴叫主轴默认从左到右排列 竖向叫做侧轴默认从上到下排列
新版本开启弹性盒子
display：flex
想要让元素进行弹性布局，必须在父元素中设置display：flex 开启弹性布局
稍微低一点的版本需要加上前缀
新版本开启使用：display：flex
- 当不设置宽高的时候内容撑开宽度
- 项目沿着主轴依次排列
- 高度默认撑开整个容器
- 当项目的宽度相加没有超过父级的宽度那么项目不进行压缩
- 当项目的宽度相加超出父级的宽度项目进行压缩并且不会填满
flex-direction
改变主轴位置
flex-direction：row 默认值由左向右
flex-direction：row-reverse 由右向左
flex-direction：column 主轴由上向下
flex-direction：column- reverse主轴由下向上
老版本开启弹性盒子
display-webkit-box
富余空间管理（主轴）
justify-content：flex-start 默认在主轴开始位置依次排列
justify-content：flex-end 在右对齐到主轴结束位置（不是反转）
justify-content：center 项目在主轴内居中
justify-content：space-around 富裕空间包含项目
justify-content：space-between 项目包含富裕空间
侧轴空间管理
align-items：stretch 默认撑满侧轴
align-items：flex-start 侧轴上对齐
align-items: center侧轴居中旨在当前项目所在的行居中
align-items：baseline基线对齐
flex-grow 将富裕空间分配给这给项目
justify-content 只是控制富裕空间怎么排列但是并没有把富裕空间分配给项目使用
flex-wrap：wrap 项目超出换行
flex-wrap：nowrap 超出就压缩
flex-wrap：wrap-reverse 超出父级的宽度换行并改变侧轴的start 和end位置
align-content：flex-start 控制项目整体打包在侧轴的居中
align-content：flex-end 控制项目整体打包在侧轴的排列
冲突：在项目换行后侧轴的排列优先align-content 在项目没有换行时，侧轴的排列优先align-items
flex-flow：wrap column
order对项目在容器中的排列，定义顺序优先没有order属性排列，然后再从小到大排列order
单独控制元素在侧轴上的位置
align-self：flex-start
align-self：center
align-self: end
收缩率
(项目1+项目2-父级宽度)项目1/（项目宽度12+项目宽度2）
子元素的基准值 flex-basis：可以在弹性布局中取代width，代表的是在主轴上的宽度但是当主轴和侧轴交换位置那flex-basis就变成了项目的高度了
等分布局条件
基准值：0
富裕空间分配项目：1
收缩率：1
简写flex：1
s