css高级
一、定位
1.1定义
作用：灵活的改变盒子在网页中的位置
实现：定位模式：position
边偏移：设置盒子的位置
left
right
top
bottom
1.2相对定位
position:relative
特点：
1.改变位置的参照物是自己原来的位置
2.不脱标、占位
3.显示模式不变
1.3绝对定位
position：absolute
使用场景：子级绝对定位，父级相对定位（子绝父相）
特点：
1.先找最近的已经定位的元素参照，所有祖先元素都没定位，就参照浏览器
2.显示模式变行内块
3.脱标，不占位
二、定位居中
2.1实现步骤
1.绝对定位
2.水平、垂直边偏移50%
3.子级向左、上移动自身尺寸的一半（margin、transform）
2.2transform
定位居中：transform：translate（50%，50%）
三、固定定位
position:fixed
特点：
1.脱标、不占位
2.参照物是浏览器窗口
3.显示模式具备行内块特点
四、堆叠层级
默认效果：按照书写顺序，后来者居上
作用：设置元素的层级顺序，改变元素定位的显示顺序
想要谁在上就给谁加z-index
取值为整数，默认为0，越大越靠上
五、css精灵
5.1优点
减轻服务器的压力，提高页面加载速度
5.2使用
设置背景图然后调整图片偏移量
六、字体图标
6.1下载
图标库：https://www.iconfont.cn/
下载步骤：
进入官网-选图标-加入购物车-添加至项目-下载到本地
6.2使用
1.把下载好的文件夹放进项目文件
2.在html文件中link iconfont.css文件 字体文件不能删
3.标签使用字体图标类名
class="iconfont 要使用的图标类名"
打开实例文件-fontclass-复制图标下的类名
如果要调整图标大小，选择器的优先级要高于iconfont类
6.3上传矢量图
svg文件上传图标库，生成字体
七.css修饰属性
7.1垂直对齐方式
vertical-align
属性值
baselline:基线对齐（默认）
top：顶部
middle：居中
bottom:底部
浏览器把行内、行内块当做文字处理，默认基线对齐（图片下面留白）
解决方式：
1.转成块
2.给图片设置对齐方式，不是基线对齐就不会留白
八、过渡
为元素在不同状态下切换添加过渡效果
transition
属性值
过渡属性 花费时间
注意：
1.过渡的属性可以是具体的css属性
2.可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
3.transition设置给元素本身
九、透明度
设置整个元素的透明度
属性名：opacity
属性值
0:完全透明
1:不透明
0-1之间：半透明
十、光标类型
鼠标悬停在元素上，指针的显示样式
cursor
属性值
default：默认值，箭头
pointer:小手
text：工字型
move：十字光标