animation
1、与transition一样，animation在IE9之前都不支持，不仅如此，还需要大量的供应商前缀
2、定义关键帧：@内容中需要大量的前缀
@keyframes fadeIn（animationName）
from{
}
50%{
}
to{
}
/*from起始关键帧，to结束关键帧，也可以用0%，100%分别表示起始与结束*/
oparity的值为0表示不可见，为1的时候表示完全可见
3、在元素中应用：
.b{
animation-name：fadeIn；
animation-duration：1s；---------设置动画从开始到结束所花的时间
}
同理，在样式用也都需要添加前缀
4、与transition一样，也有animation-timing-function，animation-delay
5、transition是只能运行一次的动画，而animation可以任意多次
Animation-iteration-count：10 -----表示进行多次，infinite表示无限次使用
6、animation-direction：alternate；动画第一次会淡出（从opacity等于1到0），第二次会重新淡入视图中（从opacity等于0到1）
7、animation-fill-mode：foeward；告诉浏览器该元素的格式要保持为动画结束时的样子，默认值是返回运行动画之前的初始状态
8、暂停animation，使用animation-play-state：running以及paused；但只有在伪类中才可以使用它，eg：.fade{animation-play-state：paused}
表格的格式化
1、caption 标签用来定义表格的标题，
<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化，例如对表格单元列设置宽高
2、我们可以对表格的标题以及表格单元标签设置padding，但不能对<table>标签设置padding
3、table，tr，td{text-align：center}
4、vertical-align与text-align不同，它不会被继承，只能把它直接应用到<th>,<td>中，top，middle，bottom
5、如果对表格单元格设置border的时候，会在表格单元直接留下一条可见细缝，
border-spacing属性可用来控制该细缝，删除单元格之间显示的空格，将值设为0，即：
table{border-spacing：0}
即使消除了边框之间的那条缝隙，还是会出现双边框的现象，border-collapse：separate（表格默认值，会有单元间隔以及双边框），collapse（消除了单元间隔以及双边框）
如果border-collapse：collapse，则border-spacing将不起作用
6、border-radius属性可以对表格单元框进行添加圆角
如果将border-collapse属性设置为collapse，则浏览器将会忽略border-radius
7、在表格中，隔行进行样式设计，tr:nth-of-type(odd){} ; tr:nth-of-type(even){}
但IE8以及之前的版本都不支持:nth-of-type选择器
8、<colgroup>,<col>分别表示一组列以及个别的列，列的背景图片显示在表格单元的下方，如果给td以及th标签设置了背景色或者背景图片，那么列的背景就看不到了
<colgroup>
<col id="brand"></col>
<col id="price"></col>
<col id="power"></col>
</colgroup>
<tr>
<th scope="col">Brand</th>
<th scope="col">Price</th>
<th scope="col">Power</th>
</tr>
9、掩藏空白的单元格
table{empty-cells：hide；}
但是如果将border-collapse的属性值设为collapse，那么浏览器将会忽略empty-cells属性，依然显示出空白单元格的边框以及背景
表单的格式化
1、fieldset标签，在这显示背景的时候，IE会让背景溢出fieldset顶部的边线，同时padding会在fieldset边沿与其里面的内容之间添加空间，但IE会忽略top padding，不过我们可以使用top margin代替
2、legend标签是紧跟着fieldset标签之后，会垂直居中显示在fieldset的顶部边框上
3、伪类：focus创建一个选择器，改变访问者单击或者跳格进入表单时表单域展现的效果
伪类：checked主要是针对单选按钮和复选按钮
伪类：enabled以及：disabled