HTML+CSS——定位、CSS精灵、字体图标

目录

一、定位

1、相对定位

2、绝对定位

3、定位居中

4、固定定位

5、堆叠层级

二、CSS精灵

1、含义

2、优点

3、实现步骤

三、字体图标

1、含义

2、作用

3、优点

4、下载字体

5、使用步骤

6、上传矢量图

---

一、定位

1、相对定位

position：relative

特点：

• 不脱标，占用自己原来位置
• 显示模式特点保持不变
• 设置边偏移，相对自己原来的位置移动

2、绝对定位

position：absolute

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

特点：

• 脱标，不占位
• 显示模式具备行内块的特点（display：block）
• 设置边偏移，相对最近已经定位的祖先元素改变位置；若祖先元素都未定位，则相对浏览器可视区域改变位置

3、定位居中

实现步骤：

• 绝对定位

    position：absolute

• 水平、垂直边偏移50%     

    left：50%；

    right：50%;

• 子级向左、上移动自身尺寸的一半

    · 方法一：左、上外边距为 -尺寸的一半

    · 方法二：transform：translate（-50%，-50%）

4、固定定位

position：fixed

使用场景：元素的位置在网页滚动时不会改变

特点：

• 脱标，不占位
• 显示模式具备行内块的特点（display：block）
• 设置边偏移，相对浏览器窗口改变位置

5、堆叠层级

z-index：n（整数数字，默认为0，n越大，层级越高，显示在越上面）

默认效果：按照标签书写顺序，后来居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序、 

---

二、CSS精灵

1、含义

把网页中一些背景图片整合到一张图片文件中，再使用background-position精确的定位出背景图片的位置。

2、优点

减少服务器被请求的次数，减轻服务器的压力，提高页面加载速度。

3、实现步骤

• 创建盒子div，div尺寸与小图尺寸相同
• 设置盒子背景background为精灵图
• 添加background-position属性，改变背景图位置

    · 用PxCook测量小图标左上角图标

    · 取坐标为bg-p的属性值（向 左-/上-/右+/下+ 移动）

---

三、字体图标

1、含义

展示的是图标，本质是字体

2、作用

在网页中添加简单的、颜色单一的小图标

3、优点

灵活性（灵活修改样式）、轻量级（体积小）、兼容性（支持所有主流浏览器）、使用方便（先下载在使用）

4、下载字体

iconfont图标库

5、使用步骤

• 引入字体样式表（iconfont.css）
• 标签使用字体图标类名

<span class="iconfont icon-xxx"><span>

    · iconfont：字体图标基本样式（字体名，字体大小等）

    · icon-xxx：图标对应的类名

• 如果要调整font-size，注意选择器的优先级要高于iconfont类！
• 所以要调用类选择器调整样式（.iconfont{}），如果调用标签选择器span，font-size不生效

6、上传矢量图