css定位&精灵图&字体图标&动画&垂直对齐&过渡&透明度

定位

作用：灵活的改变盒子在网页中的位置。

实现：

1.定位模式：position

2.边偏移：设置盒子的位置 left right  top  bottom

相对定位

position：relative

1.改变位置的参照物是自己原来的位置，不脱标，占位。别人不会占去自己原来的位置。

2.标签显示模式的特点不变。

绝对定位

position:absolute

使用场景：子级绝对定位，父级相对定位（子绝父相）

1.脱标不占位。

2.绝对定位的参照物，先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器窗口改位置。

3.显示模式特点改变，宽高生效，具有了行内块的特点。

定位居中

实现步骤：

1.绝对定位；

2.水平，垂直边偏移为50%

3.子级向左，上移动自身尺寸的一半

• 左，上的外边距为---尺寸的一半
• transform：translate（-50%,-50%)