一、弹性盒子及元素操作
多列
column-count:分列数
column-gap:栏间距
column-rule:分隔线
弹性盒子
父元素中添加
display:flex; display:-webkit-flex;
添加方向
祖先元素添加:direction:ltr/rtl 排列方向
父元素：flex-direction:row/row-reverse/column/column-reverse
子元素排列方式 ：（父元素添加）
justify-content:flex-start/flex-end/center/space-between/space-around
子元素垂直对齐方式(父元素中添加)
align-items:flex-start/flex-end/center/baseline/stretch
顶端/底端/居中/基线/默认auto
子元素换行方式（父元素添加）
flex-wrap:nowarp/wrap/wrap-reverse/initial/inherit
单行（不换行，子元素会缩放）/多行，自动换行/换行，反转排列/初始化默认效果相似/默认（不换行）
align-content 设置行对齐方式 （添加到父元素中）
前提条件是flex-wrap为wrap时才可以用
align-content:stretch/flex-start/flex-end/center/space-between/space-around
默认/顶端、底端、居中、两端、平均分布
子元素顺序（子元素添加）
order：1，值越小越靠前 可以为负值
子元素对齐（子元素添加）
margin:auto;对象自动留白
子元素纵向对齐（子元素添加）
align-self:auto/flex-start/flex-end/center/baseline/stretch
有父元素按align-item值走，无父元素按stretch走/靠顶端/靠底端/居中/基线/以父元素为参考点走
按比例分配元素（子元素添加）
flex:比例值
如：
div>div*3
子元素按顺序添加flex:1 flex:3 flex:1 结果：1：3：1
Resize
resize属性指定一个元素是否是由用户调整大小的。
resize: none|both|horizontal|vertical: 无、两边、水平、垂直
outline
轮廓线
Outline-offset 轮廓线距离
二、媒体查询及动画
媒体查询
针对不同媒体类型可以定制不同的样式规则
一种：
响应式页面
单位：
Px % em rem
Img{}
Width:100% min-width max-width
动画移动：
Translate(水平位移，垂直位移)
translateX(水平位移)
translateY（垂直位移）
旋转
Rotate(角度deg)
缩放
Scale(n) n 大于1放大，在0－1之间缩小
倾斜
Skew(X轴倾斜，Y轴倾斜)
应用方式：
Transform:动画名称；
过渡效果：
Transition:transform 时间 频率
频率：linear均速
Ease 慢开始，变快，慢结束
Ease-in 慢开始
Ease-out 慢结束
Ease-in-out 慢开始和结束
三、总结
CSS3标签总体来说比较多比较杂，需要多练习来进行加深记忆，对于以后的前端开发有着很重要的作用。多练习，就能发现语句之间的羁绊练习，比如动画效果之间的联动，多个语句联合可以做出更加实用性的动画。
