H5基础知识第八课时（CSS）

1.CSS3属性前缀
-webkit- 针对谷歌和苹果浏览器
-o- 针对欧朋浏览器
-moz- 针对火狐浏览器
-ms- 针对IE浏览器


2.长度单位
CSS3引入了一些新的尺寸单位，重点推荐的rem（根em），和em和百分比不同的是它不是与父元素挂钩，而是和文档的根元素（html）挂钩。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
我们在之前的web设计中大量使用了px进行布局，因为早期固定布局使用px较为方便，逐渐养成了这种习惯。
而使用em单位其实更加灵活，，尤其是在修改样式时，只需要修改一下挂钩元素的哪个大小即可，无须修改每一个元素。
默认挂钩元素为父元素。
网页默认字号大小为16px
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。(引自CSS2.0手册)
? ?? ? 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

EM特点?
1. em的值并不是固定的；
2. em会继承父级元素的字体大小。
px：为像素单位。它是显示屏上显示的每一个小点，为显示的最小单位。它是一个绝对尺寸单位；
em：它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
%： 百分比，它是一个更纯粹的相对长度单位。它描述的是相对于父元素的百分比值。如50%，则为父元素的一半。
这里需要注意的是：em是相对于应用于当前当前元素的字体尺寸；而百分比则是相对于父元素的尺寸。如下面示例：

3.transform:图片变形效果
(1)translate()/translateX()/translateY()： 指定对象的2D translation（2D平移）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 

(2)scale()/scaleX()/scaleY()： 指定对象的2D scale（2D缩放）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值 

(3)rotate()/rotateX()/rotateY()/rotateZ()： 指定对象的2D rotation（2D旋转），需先有 <' transform-origin '> 属性的定义 

(4)skew()/skewX()/skewY()： 指定对象skew transformation（斜切扭曲）。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0 

4.CSS3用过transition属性完成过渡效果 
(1)transition-property：设置对象中的参与过渡的属性 
(2)transition-duration： 设置对象过渡的持续时间 
(3)transition-timing-function： 设置对象中过渡的动画类型 
linear： 线性过渡。
ease： 平滑过渡。
ease-in： 由慢到快。
ease-out： 由快到慢。
ease-in-out： 由慢到快再到慢。
(4)transition-delay： 设置对象延迟过渡的时间 
注意：如果只提供一个<time>参数，则为 transition-duration的值定义；如果提供二个<time>参数，则第一个为transition-duration的值定义，第二个为transition-delay的值定义 

5.animation 定义动画

(1)animation-name： 设置对象所应用的动画名称

(2)animation-duration： 设置对象动画的持续时间 

(3)animation-timing-function： 设置对象动画的过渡类型 
linear： 线性过渡。
ease： 平滑过渡。
ease-in： 由慢到快。
ease-out： 由快到慢。
ease-in-out： 由慢到快再到慢。

(4)animation-delay： 设置对象动画延迟的时间 

(5)animation-iteration-count： 设置对象动画的循环次数 
infinite： 无限循环 

<number>： 指定对象动画的具体循环次数

(6)animation-direction： 设置对象动画在循环中是否反向运动
normal： 正常方向 
reverse： 反方向运行 
alternate： 动画先正常运行再反方向运行，并持续交替运行 
alternate-reverse： 动画先反运行再正方向运行，并持续交替运行 
 
(7)animation-fill-mode： 设置对象动画时间之外的状态 
注意：如果只提供一个<time>参数，则为 animation-duration的值定义；如果提供二个<time>参数，则第一个为animation-duration的值定义，第二个为nimation-delay的值定义 

6.display 将元素从一个类型转换成另一个类型
none： 隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间 
inline： 指定对象为行级元素。 
block： 指定对象为块元素。 
list-item： 指定对象为列表项目。 
table： 指定对象作为块元素级的表格。类同于html标签<table>（CSS2） 
inline-table： 指定对象作为行级的表格。类同于html标签<table>（CSS2） 
table-caption： 指定对象作为表格标题。类同于html标签<caption>（CSS2） 
table-cell： 指定对象作为表格单元格。类同于html标签<td>（CSS2） 
table-row： 指定对象作为表格行。类同于html标签<tr>（CSS2） 
table-column： 指定对象作为表格列。类同于html标签<col>（CSS2）