CSS中的定位和动画

一、CSS中的定位
定位分类：
1.相对定位: relative of
当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化。
元素本身的位置进行定位。
相对定位的元素不会脱离文档流

2.绝对定位: absolutely
绝对定位会寻找最近-个拥有定位属性的父元素进行原始位置的定位。
会脱离标准文档流

3.固定定位:fixed 
固定定位永远都会相对于浏览器窗口进行定位，固定定位会固定在浏览器窗口某个位置，不会随滚动条滚动，IE6不支持固定定位

4.粘性定位:stickily
以浏览器的可视窗口为参照点移动元素(固定定位特点)。
必须添加top. left. right. bottom 其中-一个才有效

注意事项：嵌套盒子的垂直外边距塌陷问题 
1.给父元素添加overflow:hidden
2.给父元素添加border属性
3.给父元素添加内边距padding-top
 
补充：overflow:hidden的作用：
1.溢出隐藏
2.解决外边距場陷
3.清除浮动

二、动画
animation-play-state    暂停动画

name     动画名称

duration    过渡耗时

timing-function     速度曲线

animation    动画

delay     等待时间

itera-count     循环次数

direction     是否反向播放

fill-mode    动画停止方向
（一）过渡：transition
1.property    过渡属性
2.duration   过渡耗时
3.timing-function   过渡曲线
4.delay    等待时间
（二）变形：transform
1.rotate    旋转
2.scale     放大缩小
第一个值控制我们X轴方向的大小，即宽度,第二个值控制我们y轴方向的大小，即高度
特性:放大和缩小的时候不会影响到其他元素的布局
3.transla     位移
当该属性的值为百分比的时候，它的参照物是该元素自身。即移动距离是自身宽度或者高度的相应百分比。
可以配合绝对定位进行块级元素的水平垂直居中