CSS3-animation，表格表单的格式化

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