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：十字光标