导航
// 语法
transition: CSS属性，花费时间，运动曲线(默认ease)，延迟时间(默认0)
// demo1
/*宽度从原始值到制定值的一个过渡，运动曲线ease,运动时间0.5秒，0.2秒后执行过渡*/
transition: width, .5s, ease, .2s;
// demo2
分开写
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
// 语法
animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），
是否反向播放动画（默认normal），是否暂停动画（默认running）
// demo1
/*执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear;
// demo2
/*2秒后开始执行一次logo2-line动画，运动时间2秒，运动曲线为 linear*/
animation: logo2-line 2s linear 2s;
// demo3
/*无限执行logo2-line动画，每次运动时间2秒，运动曲线为 linear，并且执行反向动画*/
animation: logo2-line 2s linear alternate infinite;
还有一个重要属性：用来指定在动画执行之前和之后如何给动画的目标应用样式。
animation-fill-mode: none | forwards | backwards | both;
/*
动画分为 初始状态 等待期 动画执行期 完成期 四个阶段。
none 表示 等待期和完成期，元素样式都为初始状态样式，不受动画定义（@keyframes）的影响
forwards 表示等待期保持初始样式，完成期间保持最后一帧样式
backwards 表示等待期为第一帧样式，完成期跳转为初始样式
both 表示 等待期样式为第一帧样式，完成期保持最后一帧样式
*/
参考：<https://segmentfault.com/q/1010000003867335>
transform: 适用于 2D 或 3D 转换的元素 (3d看这里)
transform-origin：转换元素的位置（围绕那个点进行转换,默认中心）。默认 x,y,z ： 50%,50%,0 对应 left, top
transform: rotate(30deg);
transform: translate(30px, 30px);
transform: scale(.8);
transform: skew(10deg, 10deg);
transform-origin: left top; 左上（默认中心）【改变元素变形的原点】
deg(Degress度)
/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
/* border-image: image-source image-height image-width image-repeat */
border-radius: 左上角，右上角，右下角，左下角
flex 布局模型的目的是提供一种更加高效的方式来对容器中的条目进行布局、对齐和分配空间。
在传统的布局方式中: block 布局是把块在垂直方向从上到下依次排列的； inline 布局则是在水平方向来排列。 flex 弹性盒布局并没有这样内在的方向限制，可以由开发人员自由操作。
弹性布局适合于移动前端开发，在Android和ios上也完美支持。
http://www.w3cplus.com/css3/flexbox-basics.html
主轴方向：水平排列（默认） | 水平反向排列 | 垂直排列 | 垂直反向排列
flex-direction: row | row-reverse | column | column-reverse;
换行：不换行（默认） | 换行 | 反向换行(第一行在最后面)
flex-wrap: nowrap | wrap | wrap-reverse;
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex-flow: <flex-direction> || <flex-wrap>;
主轴对齐方式：起点对齐（默认） | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
justify-content: flex-start | flex-end | center | space-between | space-around;
交叉轴对齐方式：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 第一行文字的基线对齐
align-items: stretch | flex-start | flex-end | center | baseline;
多根轴线对齐方式：拉伸对齐（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 两端对齐 | 分散对齐
align-content: stretch | flex-start | flex-end | center | space-between | space-around;
顺序：数值越小越靠前，默认为0
order: <number>;
放大比例：默认为0，如果有剩余空间也不放大，值为1则放大，2是1的双倍大小，以此类推
flex-grow: <number>;
缩小比例：默认为1，如果空间不足则会缩小，值为0不缩小
flex-shrink: <number>;
项目自身大小：默认auto，为原来的大小，可设置固定值 50px/50%
flex-basis: <length> | auto;
flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto
两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
项目自身对齐：继承父元素（默认） | 起点对齐 | 终点对齐 | 居中对齐 | 基线对齐 | 拉伸对齐
align-self: auto | flex-start | flex-end | center | baseline | stretch;
左右分栏、上下分栏。
子元素设置 flex: 1
flex: 1 1 0%flex 默认设置是 flex: 0 1 auto
意思是项目默认有剩余空间也不放大（0），但空间不足会缩小（1）
现在改为了值 1，就可以放大了，所以三栏可以平分宽度
参考：