两万块前端就业课程——学习笔记分享（Day

本文链接：https://blog.csdn.net/m0_73589512/article/details/150527419

接续上文:

两万块前端就业课程——学习笔记分享（Day_08）-CSDN博客

点关注不迷路哟。你的点赞、收藏，一键三连，是我持续更新的动力哟！！！

主页:一位搞嵌入式的 genius-CSDN博客

系列文章专栏:https://blog.csdn.net/m0_73589512/category_13011829.html

二、:nth-last-child () 选择器

2. 结构伪类 —nth-last-child

7. 例题：border 图形 180 度旋转

1. margin/padding 位置调整

2. left、right、top、bottom 激活

Day09（前端：HTML+CSS阶段）

1. 结构伪类选择器详解（掌握）

一、:nth-child () 选择器

1. 基本概念与语法

:nth-child()` 是最常用的结构伪类选择器，用于**根据子元素在父容器中的位置**选择元素，语法为：
`父元素 子元素:nth-child(参数)

参数类型：

数字：如 1、3，表示具体位置（从 1 开始计数）。
关键字：even（偶数位）、odd（奇数位）。
公式：如 2n、2n+1、-n+5，通过数学公式批量选择元素。

2. 常用参数及效果

参数	含义	示例（选择列表项）
`1`	第一个子元素	`ul li:nth-child(1)` 选中第 1 个 li
`3`	第三个子元素	`ul li:nth-child(3)` 选中第 3 个 li
`even`	所有偶数位置子元素（2、4、6...）	`ul li:nth-child(even)`
`odd`	所有奇数位置子元素（1、3、5...）	`ul li:nth-child(odd)`
`2n`	等价于 `even`（偶数位）	`ul li:nth-child(2n)` 选中 2、4、6... 个 li
`2n+1`	等价于 `odd`（奇数位）	`ul li:nth-child(2n+1)` 选中 1、3、5... 个 li
`4n+1`	每 4 个一组的第 1 个（1、5、9...）	`div > span:nth-child(4n+1)`
`-n+5`	前 5 个子元素（1-5）	`ol li:nth-child(-n+5)`

3. 关键特性与注意事项

计数包含所有子元素：nth-child() 会计算父元素中所有类型的子元素，而非仅目标类型。例如，父元素包含 p、li、span 时，li:nth-child(2) 仅当第 2 个子元素是 li 时才生效。
与 :nth-of-type() 的区别：若需仅计算同类型子元素（忽略其他类型），用 :nth-of-type()。示例：
```
/* 选中父元素中第2个li（无论中间有多少其他类型元素） */
ul li:nth-of-type(2) {
  color: red;
}
```

4. 实战案例

案例 1：列表隔行变色

/* 奇数行灰色，偶数行白色 */
ul li:nth-child(odd) {
  background-color: #f5f5f5;
}
ul li:nth-child(even) {
  background-color: #fff;
}

案例 2：每 3 个元素一组高亮

/* 第1、4、7...个元素高亮 */
.gallery > div:nth-child(3n+1) {
  border: 2px solid #ff6600;
}

二、:nth-last-child () 选择器

1. 基本概念

:nth-last-child() 与 :nth-child() 语法完全一致，但从父元素的最后一个子元素开始向前计数（倒序）。

常用参数示例：

参数	含义	示例
`1`	倒数第一个子元素	`table tr:nth-last-child(1)` 选中最后一行
`2`	倒数第二个子元素	`ul li:nth-last-child(2)`
`-n+3`	最后 3 个子元素（倒数 1-3）	`ol li:nth-last-child(-n+3)`
`2n`	倒数偶数位（从末尾数第 2、4、6...）	`div p:nth-last-child(2n)`

2. 应用场景

选中表格的最后几行：

/* 表格最后2行加粗 */
table tr:nth-last-child(-n+2) {
  font-weight: bold;
}

列表末尾元素特殊样式：

/* 倒数第一个列表项添加下划线 */
nav li:nth-last-child(1) {
  text-decoration: underline;
}

三、知识小结

知识点	核心内容	重点 / 易混淆点	难度系数
`:nth-child()`	按正序位置选择子元素，支持数字、关键字、公式（如 `2n` 选偶数位）	索引从 1 开始（非 0）；计数包含所有子元素，可能因其他类型元素导致选中失败	⭐⭐⭐
`:nth-last-child()`	按倒序位置选择子元素，参数规则与正序一致	与 `:nth-child()` 仅计数方向不同，公式逻辑完全相同（如 `-n+3` 选最后 3 个）	⭐⭐
与 `:nth-of-type()` 的区别	`:nth-child()` 计数所有子元素，`:nth-of-type()` 仅计数同类型元素	当父元素有多种子元素时，误用 `:nth-child()` 会导致选择失败	⭐⭐⭐⭐
公式推导	`2n+1`（奇数）、`4n`（4 的倍数）、`-n+5`（前 5 个）等公式的灵活应用	负数公式（如 `-n+5`）的理解；区分 `n` 从 0 开始递增的逻辑	⭐⭐⭐

结构伪类选择器是 CSS 布局中实现 “批量样式控制” 的核心工具，尤其适合列表、表格等有规律的结构。实际开发中，需根据是否存在多类型子元素，选择 :nth-child() 或 :nth-of-type()，并灵活运用公式实现复杂的选择逻辑。

2. 结构伪类

nth-child 选择器的基本用法已讲解完毕，接下来将介绍与之相似的 nth-of-type 选择器。

1. 结构伪类 —nth-of-type

nth-of-type 选择器的功能是通过元素类型进行筛选。具体实现方式为在指定父容器中，仅统计符合前置选择器类型的子元素顺序。

1) 例题：选择第三个 div 元素

基础选择器语法：.box div:nth-child (3) 可选中父容器内第三个子元素（需同时满足 div 类型）元素结构示例：选择逻辑：该语法会选中所有符合 div 类型的子元素中排序第三的元素，不排除非 div 类型的干扰项

2) 例题：干扰项选择问题

选择器类型	筛选逻辑	受干扰项影响	示例结果
nth-child	按所有子元素顺序计数	是	选中第三个子元素（含非 div 类型）
nth-of-type	仅按同类型元素顺序计数	否	排除非 div 类型后选中第三个 div 元素

3) 例题:nth-of-type 应用

核心差异：nth-of-type 选择器会忽略非指定类型的子元素，仅统计匹配类型的元素顺序典型场景：当 DOM 结构中存在异构子元素干扰时，需使用.box div:nth-of-type (3) 确保准确选中目标开发实践：实际项目中列表结构通常为同构，因此 nth-child 更常用，但需理解两者差异

2. 结构伪类 —nth-last-child

nth-last-child 与 nth-last-of-type 的计数逻辑与正向版本一致，区别在于从末尾开始逆向计数。这两种变体适用于需要从后向前定位元素的场景。

3. 其他结构伪类

1. :first-child

定义：选择父元素中的第一个子元素。
等价写法：等同于 :nth-child(1)。
类型限制：当指定元素类型时（如 div:first-child），要求第一个子元素必须是指定类型才能匹配。

示例代码：

.box > :first-child {
    color: red;
}

特殊情况：如果第一个子元素不是指定类型（如第一个是 span 但选择器写的是 div），则无法匹配。

2. :last-child

定义：选择父元素中的最后一个子元素。
等价写法：等同于 :nth-last-child(1)。
特点：与 :first-child 相对，从末尾开始计数。

3. :first-of-type

定义：选择父元素中指定类型的第一个子元素。
等价写法：等同于 :nth-of-type(1)。
区别：与 :first-child 不同，会排除其他类型的干扰元素。
示例：在 div>span>div>p 结构中，div:first-of-type 会匹配第一个 div，忽略中间的 span。

4. :last-of-type

定义：选择父元素中指定类型的最后一个子元素。
等价写法：等同于 :nth-last-of-type(1)。
特点：从末尾开始计数，同样会排除其他类型元素的干扰。

5. :only-child

定义：选择父元素中唯一的子元素。
应用场景：当元素是父容器中唯一的内容时应用特殊样式。

示例代码：

.box > :only-child {
    font-size: 20px;
    font-weight: 700;
}

注意：如果父元素有多个子元素，则不会匹配任何元素。

6. :only-of-type

定义：选择父元素中唯一指定类型的子元素。
区别：与 :only-child 不同，允许存在其他类型的子元素。

示例代码：

.box > :only-of-type {
    color: purple;
}

实际应用：在小程序开发中解决插槽默认值问题时会用到。
特点：只要在同类元素中是唯一的，即使有其他类型元素存在也能匹配。

7. :root

定义：选择文档的根元素（HTML 元素）。
应用：常用于设置全局 CSS 变量或基础样式。
示例代码：
```
:root {
    font-size: 30px;
}
```
特点：所有子元素都会继承 :root 设置的样式。
使用场景：常见于样式重置代码中。

8. :empty

定义：选择内容完全为空的元素。
匹配条件：元素内不能有任何内容（包括文本、空格、子元素等）。

示例代码：

:empty {
    width: 100px;
    height: 100px;
    background-color: #fe0;
}

实际应用：解决小程序插槽无内容时的默认样式问题。
注意：元素内有空格或换行符也会被视为非空。

4. 否定伪类

概念：否定伪类（negation pseudo-class）用于选择不符合特定条件的元素，语法格式为 :not(x)，其中 x 可以是元素选择器、通用选择器、属性选择器、类选择器、id 选择器或伪类（除否定伪类本身）。

应用场景：当需要为除特定元素外的其他元素设置样式时使用，属于特殊场景下的选择器，实际开发中使用频率较低。

1. 例题：否定伪类应用

示例结构：

<div class="box">
  <div class="item">列表内容1</div>
  <div class="item">列表内容2</div> 
  <div class="why">列表内容3</div>
  <div class="item">列表内容4</div>
  <div class="item">列表内容5</div>
  <div>列表内容5</div>
</div>

常规做法：通过 .item { color: red; } 为所有 class 为 item 的元素设置红色。
否定伪类做法：通过 .box :not(.why) { color: blue; } 为 box 下所有 class 不是 why 的元素设置蓝色。
注意事项：
- 不加限制的 :not 选择器会选中 body、html 等所有不符合条件的元素。
- 实际使用时需要限定作用范围（如示例中的 .box 前缀）。
- 该选择器优先级与普通类选择器相同。

2. 例题：否定伪类选择器

典型使用场景：当页面中存在规律性结构，但个别元素需要排除时使用。
开发建议：
- 优先考虑常规 class 选择器。
- 仅在特殊场景下使用否定伪类。
- 使用时必须限定作用范围，避免样式污染。
记忆要点：
- 语法格式必须牢记。
- 参数 x 不能包含否定伪类本身。
- 实际开发中应用场景有限，了解即可。

3. 知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
结构伪类选择器	讲解 `:nth-of-type` 与 `:nth-child` 的区别，以及 `:last-child` 等基础伪类	`:first-child` 与 `:first-of-type` 选择逻辑差异	⭐⭐
`:first-child` 伪类	选择父元素的第一个子元素（需匹配指定类型）	当第一个子元素非目标类型时失效	⭐⭐
`:last-child` 伪类	类比 `:nth-last-child(1)` 选择最后一个子元素	与 `:nth-last-of-type` 的关联性	⭐⭐
`:only-child` 伪类	选择父元素中唯一的子元素	多元素共存时选择失效	⭐⭐⭐
`:only-of-type` 伪类	选择同类型元素中的唯一实例	与 `:only-child` 的包含关系	⭐⭐⭐⭐
`:root` 伪类	匹配文档根元素（HTML 元素）	全局样式覆盖优先级问题	⭐⭐
`:empty` 伪类	选择内容为空的元素	小程序插槽默认值解决方案	⭐⭐⭐⭐
否定伪类 `:not()`	排除特定条件的元素	选择器组合逻辑的复杂性	⭐⭐⭐⭐
伪类实战应用	演示通过伪类实现动态样式控制	结构伪类与属性选择器的组合使用	⭐⭐⭐
选择器优先级	强调常用伪类的使用频率（`:nth-child` 最常用）

5. border 图形的实现与应用

border 的主要作用是为盒子添加边框，但通过其特性也可实现特定图形效果。开发过程中可利用 border 特性绘制图形，具体实现方式如下：

1. 例题：border 的图形应用

创建 100×100 红色方框：设置宽度 100px、高度 100px、背景色 #f00。
添加 30px 橙色边框：设置border: 30px solid orange。
调整盒模型：将box-sizing设为border-box使边框包含在 100×100 尺寸内。
边框分区可视化：通过border-right-color、border-bottom-color、border-left-color分别设置不同颜色，可发现边框被等分为四个梯形区域，每个区域面积相等。

2. 例题：网易三角形绘制

三角形生成原理：当内容区域（宽高）被挤压至 0px 时，四个边框会形成四个三角形。
单三角形实现步骤：
- 设置border-width为 50px（使内容区域消失）。
- 将border-right-color、border-bottom-color、border-left-color设为transparent。
- 内容背景色设为transparent。
实际应用场景：网易导航栏三角形指示符可通过此方法实现。

3. 例题：考拉三角形绘制

特性	实现方案	技术要点
三角形基础形态	border 单边着色，三边透明处理	仅保留目标方向边框颜色，其余设为 transparent
悬停旋转动画	使用`transform: rotate()`	需配合`transition`实现平滑过渡效果
颜色变化效果	通过`:hover`伪类控制	鼠标悬停时修改`border-top-color`等值

4. 例题：小米三角形绘制

方向调整需求：实际应用中需要不同朝向的三角形（上、下、左、右）。
解决方案：
- 方案 1：保留目标方向的边框颜色（如向下三角形保留border-top-color，其余透明）。
- 方案 2：通过transform旋转现有三角形（推荐方案，更灵活）。

5. 例题：旋转 box 绘制

transform属性可实现图形旋转，具体参数为rotate(角度deg)。旋转轴心默认在元素中心点，可通过transform-origin调整旋转基准点。实际开发中需注意：旋转角度与轴心位置的精确配合才能实现预期效果。

6. 例题：border 图形旋转

轴心定位问题：默认旋转中心为元素几何中心，可能导致旋转轨迹不符合预期。
精确定位方案：
- 计算目标轴心位置（如25% 50%）。
- 设置transform-origin: x-axis y-axis（x 轴和 y 轴坐标可使用百分比、像素等单位）。
视觉优化：旋转 180 度时需确保轴心位于图形底部中点，使旋转更自然。

7. 例题：border 图形 180 度旋转

完整旋转实现流程：
1. 生成基础三角形（如border-top着色，其余透明）。
2. 设置transform-origin: 50% 25%（根据图形调整轴心）。
3. 添加transform: rotate(180deg)。
4. 配合transition实现平滑动画（如transition: transform 0.5s）。
关键点：轴心位置决定旋转轨迹的自然程度，需根据图形形态微调。

8. 例题：border 图形优化

代码优化方案：
- 简化写法：仅设置目标方向边框颜色（如border-top-color），其余保持默认透明（无需显式声明）。
- 维护建议：优先使用transform旋转方案而非多边框着色，减少代码冗余。
注意事项：此技术属于 CSS 特性活用，实际开发中应权衡使用必要性（简单图形可用，复杂图形建议用图片或 SVG）。

9. 例题：CSS 图形大全

CSS Tricks 网站列举了多种通过 CSS 绘制的图形：

基础图形：正方形（宽高 + 背景色）、长方形（调整宽高比例）、圆形（border-radius: 50%）、椭圆形（调整border-radius水平和垂直参数）。
三角形相关：等边三角形（利用 border 属性，但视觉效果较差）、方向性三角形（通过调整 border 方向或旋转实现，应用广泛）。
复杂图形：箭头（组合 border 属性生成）、五角星（代码复杂）、心形（代码复杂）、八卦图形（仅作了解）。

重点提示：

最常用图形为正方形、长方形、圆形及方向性三角形。
核心实现原理均基于 border 属性的灵活运用（边框分区特性、透明色配合等）。
复杂图形如五角星、心形等虽可实现，但代码维护成本高，不建议实际采用（优先使用图片或 SVG）。

6. 网络字体

1. 网络字体的使用过程

网络字体的工作原理已讲解完毕，接下来将具体演示其使用方法。

1) 获取字体文件

字体获取渠道：实际开发中应由产品或设计部门提供授权字体文件，禁止擅自下载未授权字体以避免侵权风险。
演示网站：fonts.cn提供免费与付费字体资源，商用字体需获取正式授权。
文件处理流程：
- 下载字体文件后需解压缩。
- 在项目目录中创建专用fonts文件夹管理字体资源。
- 将字体文件拖入指定目录完成资源准备。

2) Web 字体的基本使用

默认字体机制：浏览器默认使用操作系统预设字体。
常见错误：直接通过文件名指定font-family无法生效，需先完成字体引入。
核心问题：
- 字体文件路径未正确指定。
- 特殊文件名不能直接作为字体名称使用。

3) @font-face 引用字体

标准语法：通过

@font-face

规则引入外部字体，示例：

@font-face {
  font-family: "w9y"; /* 自定义字体名称 */
  src: url("fonts/w9y.ttf") format("truetype"); /* 字体文件路径及格式 */
}

关键参数：
- font-family：自定义字体名称（如示例中的 "w9y"），用于后续样式调用。
- src：通过url()指定字体文件路径，format()可选，用于声明字体格式（如truetype、woff等）。
开发技巧：现代 IDE（如 VS Code）支持自动补全该语法结构，减少手写错误。

4) 字体名称使用

命名一致性：元素样式中的

font-family

必须与

@font-face

定义的名称完全匹配，示例：

.title {
  font-family: "w9y"; /* 与@font-face中的font-family一致 */
}

注意事项：自定义名称需避免与系统字体名称（如 "Microsoft YaHei"、"Arial"）冲突，建议添加项目前缀（如 "project-sans"）。

5) 应用案例

例题：字体应用示例

操作步骤	技术要点	实现效果
定义`@font-face`规则	正确配置字体路径与命名	建立字体资源映射关系
应用`font-family`样式	使用自定义字体名称	文本显示为指定字体效果
浏览器加载机制	自动下载服务器字体文件	实现跨平台字体一致性

2. 知识小结

知识点	核心内容	易混淆点	难度系数
网络字体兼容性	不同浏览器对字体格式的支持差异（TTF/OTF/WOFF/SVG 等）	封装格式与编码格式的区别	⭐⭐⭐
字体格式类型	- TTF/OTF（TrueType/OpenType） - WOFF（Web Open Font Format） - SVG 字体	IE8-11 仅支持 EOT 格式	⭐⭐
浏览器适配方案	提供多格式字体文件实现兼容： `@font-face { src: url(); format() }`	双 src 写法为兼容旧版 IE 的特殊语法	⭐⭐⭐⭐
字体加载机制	浏览器按顺序尝试加载字体文件，使用首个可识别格式	后缀名不能作为文件类型唯一依据	⭐⭐⭐
性能优化建议	现代开发可优先使用 TTF/WOFF 格式（覆盖 95% 浏览器）	多格式加载会增大资源体积	⭐⭐
工具链支持	字体转换网站可生成全格式包（含 TTF/WOFF/SVG 等）	大字体文件转换易导致网站卡死	⭐⭐⭐
行业实践案例	阿里图标库现仅提供 TTF 格式（已满足主流浏览器）	Safari 需特殊处理 SVG 格式	⭐⭐
标准化方案	Paul Irish 提出的防弹 @font-face 写法（BootProve）

3. 网络字体与字体图标

1. 网络字体的兼容性写法

bulletproof 语法：由 Paul Irish 提出的兼容性写法，确保字体在各种浏览器中都能正常显示。
格式说明：
- format作用：帮助浏览器快速识别字体格式，提高加载效率。
兼容范围：
- .eot：IE9 及以下
- .woff：Chrome/Firefox
- .ttf：Chrome/Firefox/Opera/Safari/Android/iOS4.2+
- .svg：iOS4.1-

2. 字体图标的概念与优势

本质：将图标设计成字体形状的特殊字体。
核心优势：
- 矢量特性：放大不会失真。
- 颜色可变：可通过 CSS 任意修改颜色。
- 体积优势：多个图标使用时文件体积比图片小很多。
设计原理：利用字体可以设计成各种形状的特性，将特定形状作为图标使用。

3. 字体图标的使用方法

资源平台：推荐使用阿里 icons（iconfont-阿里巴巴矢量图标库）。
使用步骤：
- 登录平台下载所需图标代码。
- 将代码拷贝到项目中。
- 导入字体文件和默认 CSS 文件。
图形字体示例：如 “Florets And Embellishments” 等特殊字体可以直接作为图标使用。

4. 字体与图标的转换原理

设计思路：通过字体设计工具将特定图形编码为字符。
实际应用：单个字符可以显示为完整图标，如星星、箭头等常用图形。
文件结构：通常包含.ttf/.woff 等字体文件和配套的 CSS 样式文件。

4. 字体图标

1. 思考

概念提出：字体可以设计成各种图形，因此可以直接将字体设计成图标样式，这种特殊字体称为 “字体图标”。
与传统图标对比：与传统的通过img标签或background-image加载的图标相比，字体图标具有独特优势。

2. 字体图标的好处

无损缩放：
- 作为矢量字体，放大时不会失真。
- 传统图片放大时会出现像素点导致模糊。
颜色可变：
- 可通过color属性任意改变颜色。
- 图片颜色固定，修改需要复杂处理。
体积优势：
- 多个图标使用时文件体积远小于图片。
- 文本文件比图片文件小得多（10KB 文本可包含大量内容）。

3. 字体图标的使用

1）字体图标的好处

核心优势总结：
- 任意缩放不失真。
- 自由切换颜色。
- 多图标使用时文件体积小。

2）阿里图标库介绍

资源平台：
- 官方推荐使用阿里巴巴矢量图标库（iconfont.cn）。
- 海量精品图标资源，支持用户上传分享。
平台特点：
- 提供多种格式下载（SVG/AI/PNG 等）。
- 支持将图标转换为字体文件。

3）图标搜索与选择

搜索技巧：
- 建议使用英文关键词搜索（如 “music”、“video”）。
- 支持中文搜索但结果可能不够精准。
选择流程：
- 浏览搜索结果，选择合适图标。
- 可将心仪图标加入购物车或收藏。

4）图标下载与项目添加

下载方式：
- 需要注册登录后才能下载。
- 推荐下载代码而非直接下载图片。
文件组成：
- 下载包包含字体文件（.ttf）和 CSS 文件。
- 字体文件是关键资源。

5）字体文件的使用

使用步骤：
- 解压下载的 zip 包。
- 获取.ttf 字体文件。
- 将字体文件放入项目目录。
- 通过@font-face引入字体。
注意事项：
- 字体文件路径需要正确配置。
- 建议建立专门的fonts目录存放字体文件。

4. 字体图标的使用

1）Unicode 字体图标使用步骤

本质理解：字体图标本质上是特殊设计的字体，通过 Unicode 字符实体形式展示为图标。
使用步骤：
- 加载字体文件：使用@font-face定义字体家族并指定字体文件路径。
- 定义样式：为元素设置font-family使用该字体。
- 指定内容：通过字符实体（如）显示特定图标。

代码示例：

@font-face {
  font-family: "iconfont";
  src: url("./fonts/iconfont.ttf");
}
.icon {
  font-family: "iconfont";
  font-style: normal;
}

2）字体图标的应用

样式控制：
- 可像普通文本一样调整大小（font-size）。
- 可修改颜色（color）。
- 可消除斜体效果（font-style: normal）。
多图标管理：
- 通过不同class区分不同图标。
- 推荐使用伪元素（::before）集中管理图标内容。
- 避免直接修改所有i元素的样式。

优化方案：

.music::before {
  content: "\e654"; /* 使用十六进制编码 */
  font-family: "iconfont";
}

3）使用配置好的 CSS

开发实践：
- 从iconfont.cn下载完整资源包。
- 直接引用提供的iconfont.css文件。
- 通过组合class使用图标（iconfont + 具体图标class）。
优势：
- 无需手动配置@font-face。
- 内置常用图标样式。
- 支持按需调整大小和颜色。

代码示例：

<link rel="stylesheet" href="./fonts/iconfont.css">
<i class="iconfont icon-music"></i>

4）总结

核心原理：字体图标本质是特殊编码的字体文件。
前置知识：必须先掌握网络字体的使用原理。
兼容性：现代浏览器通常只需.ttf 格式即可支持。
最佳实践：直接使用阿里图标库提供的 CSS 方案。
扩展性：可通过生成多格式字体文件解决兼容性问题。

5. 知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
网络字体兼容性写法	讲解网络字体的兼容性写法，强调理解和使用方法	兼容性写法的具体实现和适用场景	⭐⭐
字体图标概念	字体图标是将字体设计成图标形状的技术，本质仍是字体	字体图标与传统图片图标的区别	⭐⭐
字体图标的优势	1. 放大不失真 2. 任意切换颜色 3. 占用空间小（适用于大量图标场景）	与图片图标的性能对比	⭐⭐⭐
阿里图标库（Iconfont）使用	1. 搜索图标并收藏 2. 下载代码（含字体文件） 3. 通过伪元素或字符实体引入	下载代码而非图片素材，注册登录需求	⭐⭐⭐
字体图标实现方式	1. 直接使用字符实体 2. 通过伪元素（::before）动态注入内容	伪元素方式的开发规范与优势	⭐⭐⭐⭐
实际开发优化	直接引用阿里提供的 CSS 文件（iconfont.css），通过 Class 快速调用图标

7. 精灵图

1. 认识精灵图

1）什么是 CSS Sprite

技术本质：一种 CSS 图像合成技术，将多个小图片合并到一张大图上，通过 CSS 背景定位显示特定部分。
别称：也被称为 CSS 雪碧图或 CSS 精灵图（因英文 Sprite 与雪碧饮料同名）。
实现原理：通过设置元素的宽高和背景图片，调整background-position属性来精确定位显示需要的图标部分。

2）使用 CSS Sprite 的好处

减少 HTTP 请求：将多个图片请求合并为一次请求，显著提升网页加载速度（如 6 个图标从 6 次请求减少为 1 次）。
减轻服务器压力：在高并发场景下（如京东、淘宝等大型电商网站），能大幅降低服务器负载。
优化文件体积：合并后的图片总大小通常小于各小图片体积之和（因共享图片头信息等元数据）。
简化命名管理：只需对合成后的单张图片命名，避免大量小图片的命名困扰。
性能优化价值：属于前端性能优化的重要手段，常被面试官考察。

3）Sprite 图片制作

设计工具制作：通常由设计师使用 Photoshop 等工具提供成品。
在线生成工具：推荐使用https://www.toptal.com/developers/css/sprite-generator等专业工具。
适用场景：主要用于小图标合并，大尺寸背景图不建议使用此技术。
开发流程：前端开发者通常直接使用设计提供的精灵图，无需自行制作。

4）精灵图的使用

实现步骤：
- 设置元素的精确宽高（对应目标图标尺寸）。
- 将精灵图设为背景图片。
- 通过background-position调整显示位置。
定位工具：可使用Sprite Cow - Generate CSS for sprite sheets辅助获取精确坐标。
实际案例：
- 网易云音乐顶部导航栏的 hot 标签、logo 等元素。
- 京东商城的各种小图标（如客服图标等）。
现代替代方案：SVG 矢量图逐渐流行（如头条图标），但精灵图仍在传统 PNG/JPG 场景广泛应用。
技术选型：需根据具体场景选择 image 标签、border 绘图、字体图标、精灵图或 SVG 等不同方案。

2. 知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
精灵图 (CSS Sprite)	将多个小图标合成一张大图的技术，通过`background-position`定位显示特定图标	优势对比：减少 HTTP 请求 vs 单独请求多张小图	⭐⭐
精灵图优势	1. 减少服务器压力 2. 加快网页加载 3. 简化文件管理（减少命名困扰） 4. 可能减小总文件体积	注意：大背景图不适合此技术	⭐⭐
实现方式	1. 设计人员用 Photoshop 合成 2. 在线工具自动生成	与 SVG / 字体图标的应用场景区别	⭐⭐
技术原理	通过 CSS 的`background-position`属性控制显示位置	坐标计算方法的掌握	⭐⭐⭐
行业应用	网易 / 京东等网站的小图标整合案例	现代网站更倾向使用 SVG 矢量图	⭐⭐
性能优化	属于前端性能优化重要手段，可提升高并发场景表现	面试常考点：减少 HTTP 请求的意义	⭐⭐⭐
技术对比	图片方案对比： - 原生 img 标签 - border 绘制 - 字体图标 - SVG 矢量图 - 精灵图	各方案适用场景分析	⭐⭐⭐

8. 精灵图的使用过程

1. 精灵图的基本原理

定义：精灵图是将多个小图标合并到一张大图中的技术方案。
使用方式：通过 CSS 的background-image和background-position属性显示特定部分。
优势：减少 HTTP 请求次数，提高页面加载性能。
典型应用：按钮背景、小图标展示等 UI 元素。

2. 使用步骤详解

步骤 1：创建容器元素（常用<i>标签，语义化表示图标）。
步骤 2：设置display: inline-block使其可设置宽高（块级元素也可，根据布局需求选择）。
步骤 3：设置精确的width和height（尺寸需与目标图标一致，由美工提供或工具测量）。
步骤 4：设置background-image为精灵图路径（如url(./images/sprite.png)）。
步骤 5：设置background-position定位到具体图标位置（通过坐标调整显示区域）。
步骤 6：设置background-repeat: no-repeat防止图片平铺（避免多余部分显示）。

3. 定位工具使用

工具推荐：使用www.spritecow.com在线工具定位图标。
使用方法：
- 上传精灵图文件。
- 框选需要使用的图标区域。
- 自动生成对应的 CSS 代码（包含宽高、background-position等）。
测量要点：需要精确获取图标的 x/y 偏移量和宽高尺寸，确保显示无偏差。

4. 代码优化技巧

公共样式抽取：将重复的background-image、background-repeat等属性提取到公共类，减少代码冗余。
命名规范：建议使用语义化的类名如.topbar（公共容器）、.hot-icon（具体图标）。

组合使用：元素同时添加公共类和具体图标类，示例：

/* 公共样式 */
.topbar {
  background-image: url(./images/topbar_sprite.png);
  background-repeat: no-repeat;
  display: inline-block;
}

/* 具体图标样式 */
.hot-icon {
  background-position: -192px 0; /* 定位到"hot"图标 */
  width: 26px;
  height: 13px;
}

5. 实际应用注意事项

对齐难题：inline-block元素与文本混排时，可能因基线对齐导致图标偏移。
解决方案：
- 复杂布局中使用 flex 布局替代（后续课程详解）。
- 避免在需要精确对齐的场景下强行使用inline-block。
- 适当使用vertical-align: middle调整（部分场景有效，受字体影响可能不完全居中）。
开发建议：初期可先关注功能实现，布局细节问题后续通过专项布局知识解决。

6. 网易云音乐案例实现

实现要点：
- 黑色背景容器增强视觉对比，突出图标。
- 精确测量 "hot" 图标位置（background-position: -192px 0）。
- logo 图标使用不同定位值（如background-position: 0 -19px）。
调试技巧：
- 使用浏览器开发者工具（F12）实时调整background-position值，预览效果。
- 通过添加临时边框（border: 1px solid red）辅助定位元素范围。
- 注意图标原始图片可能包含透明边距，测量时需包含完整图标区域。

7. 知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
精灵图概念	将多个小图标合并到一张大图中，通过 CSS 背景定位显示特定图标	理解精灵图与普通图片的区别	⭐⭐
精灵图使用方法	1. 设置元素宽高；2. 设置背景图片；3. 使用`background-position`定位	`background-position`负值计算（左移 / 上移用负值）	⭐⭐⭐
开发工具使用	推荐www.spritecow.com工具辅助获取精灵图坐标	工具坐标与 CSS 代码的对应关系（工具显示正值，CSS 可能需负值）	⭐⭐
代码优化技巧	将重复 CSS 属性抽取到公共 class	多 class 组合使用的优先级问题（后声明的类优先级更高）	⭐⭐⭐
布局注意事项	`inline-block`元素与文本混排时的对齐问题	`vertical-align: middle`不完全居中现象	⭐⭐⭐⭐
开发流程建议	美工应提供图标尺寸和位置参数	开发与设计的协作规范（减少重复

9. 额外知识补充

1. 光标的显示效果

定义：cursor属性用于设置鼠标指针在元素上的显示样式。
默认值：
- auto：浏览器根据上下文自动决定指针样式（如文本显示竖线，非文本显示箭头）。
- 普通元素未设置时默认为auto，但a元素浏览器默认设置为pointer（小手）。
常见取值：
- pointer（重点掌握）：小手样式，常用于可点击元素。
- text：文本输入竖线（I 形）。
- default：系统默认箭头（强制所有状态显示箭头）。
- none：隐藏指针（进入元素区域后指针消失）。
应用技巧：
- 用div + cursor:pointer可以完全模拟a标签的交互效果。
- 实际开发中 90% 场景只需掌握pointer的使用。
- 修改光标样式时通常需要配合text-decoration和color样式。
注意事项：
- 浏览器对不同元素的默认cursor处理不同（如a标签自动设为pointer）。
- 使用none时要考虑元素的可交互性（用户可能找不到指针位置）。
- default会覆盖浏览器默认的智能切换行为（如文本区域不再显示 I 形指针）。
开发建议：
- 优先使用pointer增强可点击元素的视觉反馈。
- 谨慎使用none，确保不会影响用户体验。
- 其他取值了解即可，实际开发使用频率较低。

2. 知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
精灵图使用	讲解精灵图的基本使用流程，强调初学者需通过练习理解操作步骤的实践应用	实践应用（步骤完整性与定位准确性）	⭐⭐
`cursor`属性	控制鼠标指针在元素上的显示形式（如`pointer`/`text`/`default`）	`auto`与`default`的区别、`pointer`的常见应用场景	⭐⭐
默认光标行为	浏览器根据元素类型自动设置光标样式（如文本显示竖线，链接显示小手）	浏览器默认规则与自定义覆盖	⭐
`cursor`值对比	`pointer`（小手）、`text`（竖线）、`default`（箭头）、`none`（隐藏）	`pointer`为重点掌握值，其他了解即可	⭐⭐
元素本质差异	通过`cursor`和样式模拟链接效果，说明元素间无本质区别（如`div`模拟`a`标签）	事件监听实现跳转（超越样式的功能模拟）	⭐⭐⭐

给出相应的示例

3. cursor 属性应用示例

以下是cursor属性常见取值的实际应用代码，帮助理解不同光标样式的效果和使用场景：

基础示例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>cursor属性示例</title>
  <style>
    .box {
      width: 200px;
      height: 80px;
      margin: 15px;
      padding: 10px;
      border: 1px solid #ccc;
      display: inline-block;
      text-align: center;
      line-height: 80px;
    }
    
    /* 可点击元素样式 */
    .clickable {
      background-color: #f0f7ff;
      cursor: pointer; /* 重点：小手样式 */
    }
    
    /* 文本区域样式 */
    .text-area {
      background-color: #fff7e6;
      cursor: text; /* 文本输入竖线 */
    }
    
    /* 默认箭头样式 */
    .default-cursor {
      background-color: #e6fffa;
      cursor: default; /* 强制显示系统默认箭头 */
    }
    
    /* 隐藏光标 */
    .hidden-cursor {
      background-color: #ffebee;
      cursor: none; /* 进入区域后光标消失 */
    }
    
    /* 模拟链接效果 */
    .fake-link {
      color: #1890ff;
      text-decoration: underline;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h3>cursor属性常见取值效果</h3>
  
  <div class="box clickable">
    cursor: pointer（可点击元素）
  </div>
  
  <div class="box text-area">
    cursor: text（文本输入区域）
  </div>
  
  <div class="box default-cursor">
    cursor: default（默认箭头）
  </div>
  
  <div class="box hidden-cursor">
    cursor: none（隐藏光标）
  </div>
  
  <p>普通文本区域会自动显示 <strong>text</strong> 样式光标（鼠标移到这段文字上试试）</p>
  
  <p>普通链接：<a href="#">我是a标签，默认cursor: pointer</a></p>
  
  <p>模拟链接：<span class="fake-link">我是span标签，通过CSS模拟链接效果</span></p>
</body>
</html>

示例说明

重点场景解析
- cursor: pointer：最常用的取值，用于按钮、导航、可点击卡片等交互元素，明确告诉用户 "这里可以点击"
- cursor: text：常用于输入框、文本编辑区域，提示用户 "这里可以输入文本"
- 模拟链接效果：通过color: #1890ff+text-decoration: underline+cursor: pointer，让普通元素（如 span、div）拥有和 a 标签一致的视觉交互效果
注意事项演示
- 普通文本段落默认会根据内容自动切换为text样式（无需手动设置）
- a标签无需额外设置cursor: pointer，浏览器会自动应用
- cursor: none使用时需谨慎（如示例中最后一个盒子），可能导致用户找不到光标位置
实际开发建议
- 可点击元素务必添加cursor: pointer，增强交互反馈
- 避免过度使用cursor: default，会覆盖浏览器的智能判断
- 除非特殊交互需求（如自定义拖拽控件），否则不建议使用cursor: none

10. 标准流

标准流对应的英文为 normal flow。默认情况下，网页中的元素按照标准流进行布局。

1. 标准流定义

标准流是网页文档默认的布局方式。

2. 标准流特点

块级元素（如div）独占一行。
行内级元素（如span）与其他行内元素在同一行显示。
display: inline-block的元素同样遵循行内元素的排列规则。
标准流布局规则：元素默认从左往右、从上往下顺序排列，同级元素之间不会层叠。
标准流别名：常规流（normal flow）、文档流（document flow）。

3. 标准流布局示例

行内元素（如span、img）从左到右依次排列，超出宽度后换行。
块级元素（如div、p）独占一行，强制换行。
元素位置调整可通过
```
margin
```
和
```
padding
```
实现，但存在以下缺点：
- 影响其他元素：调整一个元素的边距会导致相邻元素位置变动。
- 无法实现层叠：默认情况下，兄弟元素无法重叠。
脱离标准流的需求：当需要精确定位或实现层叠效果时，需通过定位属性（如position）使元素脱离标准流。

4. 定位

position属性用于控制元素是否脱离标准流。

设置position属性（如fixed）后，元素将脱离标准流，可独立定位且不影响其他元素。

5. 结束

标准流是默认布局方式，但存在调整困难、无法层叠等局限性。position属性是解决这些问题的关键，后续将重点学习其用法。

11. 标准流(补充)

标准流是指对页面元素进行布局的基本方式。标准流的核心在于元素按照默认规则排列，无需额外设置即可实现基础布局。

1. margin/padding 位置调整

通过设置margin和padding可调整元素位置。行内元素默认无法设置上下边距，需通过修改display属性为inline-block使其生效。脱离标准流的方法是通过定位属性，使元素脱离默认布局规则实现特殊位置控制。

2. 元素的定位

定位允许将元素从标准流中提取，实现以下行为：

重叠显示：突破标准流禁止元素重叠的限制
视口固定：使元素始终保持在浏览器可视区域的指定位置

1. 例题：网页固定位置条目

以网易云音乐播放栏为例：

实现效果：滚动页面时播放栏始终固定在底部
技术原理：通过position: fixed脱离标准流实现绝对定位

2. 例题：网页固定位置购物车

以京东悬浮购物车为例：

实现效果：滚动时图标始终停留在视口右侧
技术方案：采用position: sticky或动态计算滚动位置实现

3. 例题：网页固定位置广告

购物车数字角标实现要点：

覆盖效果：通过定位使数字覆盖在图标上
技术选择：可采用position: absolute或sticky两种方案

4. 例题：王者荣耀官网定位条目

常见定位应用场景包括：

侧边悬浮栏（王者荣耀官网右侧导航）
数字角标（购物车数量提示）
底部播放栏（音乐类网站固定控件）

3. position 属性

position属性主要取值包括：

取值类型	特性
static	静态定位（默认值，遵循标准流）
relative	相对定位（相对于原位置偏移）
absolute	绝对定位（相对于最近定位祖先元素）
fixed	固定定位（相对于视口定位）
sticky	粘性定位（滚动阈值触发固定）

1. 默认值

static为默认定位类型，此时元素遵循标准流布局规则，且top/right/bottom/left属性无效。

1) 静态定位

静态定位元素特性：
- 完全遵循标准流布局规则
- 无法通过top/right/bottom/left改变位置
静态定位转为其他定位：当position值改为relative/absolute/fixed/sticky时：
- 激活定位属性：使top/right/bottom/left生效
- 创建定位上下文：影响子元素的绝对定位基准
静态定位时的其他属性无效：关键限制：在static状态下，所有定位相关属性（如left: 100px）均不会产生任何布局效果。

4. 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>电商页面悬浮购物车</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      height: 2000px;
      padding: 20px;
      font-family: Arial, Helvetica, sans-serif;
    }
    .goods-list {
      max-width: 800px;
      margin: 0 auto;
    }
    .goods-item {
      padding: 15px;
      border: 1px solid #eee;
      margin-bottom: 10px;
    }
    .cart-float{
      position: fixed;
      right: 30px;
      top: 50%;
      transform: translateY(-50%); /* 垂直居中 */
      width: 60px;
      height: 60px;
      background-color: #ff4400;
      border-radius: 50%;
      color: white;
      text-align: center;
      line-height: 60px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2);
      /* 相对定位容器 - 用于子元素绝对定位 */
      position: relative; 
    }
    /* 2. 购物车数量角标 - absolute绝对定位 */
    .cart-badge {
      position: absolute; /* 相对于最近定位祖先（.cart-float） */
      top: -8px;
      right: -8px;
      width: 24px;
      height: 24px;
      background-color: #fff;
      color: #ff4400;
      border-radius: 50%;
      font-size: 12px;
      line-height: 24px;
      font-weight: bold;
    }
    .back-top {
      position: fixed;
      right: 30px;
      bottom: 30px;
      width: 50px;
      height: 50px;
      background-color: #333;
      color: white;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
    }
     /* 4. 商品标签 - relative相对定位 */
    .goods-tag {
      display: inline-block;
      padding: 3px 8px;
      background-color: #ff4400;
      color: white;
      font-size: 12px;
      /* 相对定位：相对于自身原位置偏移 */
      position: relative;
      top: -2px; /* 向上偏移2px */
      left: 5px; /* 向右偏移5px */
    }
  </style>
</head>
<body>
  <h2>商品列表</h2>
  <div class="goods-list">
    <div class="goods-item">
      商品1：智能手机 <span class="goods-tag">热销</span>
    </div>
    <div class="goods-item">
      商品2：无线耳机 <span class="goods-tag">新品</span>
    </div>
    <div class="goods-item">
      商品3：笔记本电脑
    </div>
    <!-- 更多商品... -->
  </div>
  
  <!-- 悬浮购物车（含数量角标） -->
  <div class="cart-float">
    🛒
    <span class="cart-badge">3</span>
  </div>
  
  <!-- 回到顶部按钮 -->
  <div class="back-top">↑</div>
</body>
</html>

解释:

属性	正值	负值
`top`	向下	向上
`bottom`	向上	向下
`left`	向右	向左
`right`	向左	向右

💡 简单记忆：

top 越大，越往下

left 越大，越往右

负数就是反方向

👉 只有当 position 是 fixed（或 absolute）时，right 和 bottom 才会生效。

属性	意义	方向
`right: 30px`	元素右边距离浏览器右边 30px	← 从右往左
`bottom: 30px`	元素底边距离浏览器底部 30px	↑ 从下往上

✅ 这两个属性配合 position: fixed，可以让元素固定在视口的某个角落，非常适合做：

回到顶部按钮
客服悬浮窗
分享按钮
返回首页图标

这就是现代网页中常见的“悬浮按钮”（Floating Action Button）的实现方式！

12. 相对定位及相关知识

1. 相对定位

1. 相对定位的特点

定义：通过设置position: relative使元素成为定位元素，但仍保持在标准流中布局。
布局特性：
- 元素依然按照标准流（normal flow）进行布局。
- 不会脱离文档流，仍占据原有空间。
- 不会影响其他元素的布局位置。
参照基准：相对于元素自身原来的位置进行偏移。
验证方法：
- 添加图片元素验证定位元素是否仍占据空间。
- 对比使用
```
margin
```
  和
```
relative
```
  的区别：
  - margin会影响后续元素位置。
  - relative仅改变自身位置。

2. left、right、top、bottom 激活

可调属性：
- left：向右偏移（正值）或向左偏移（负值）。
- right：向左偏移（正值）或向右偏移（负值）。
- top：向下偏移（正值）或向上偏移（负值）。
- bottom：向上偏移（正值）或向下偏移（负值）。
偏移原理：
- 正值表示向对应方向移动。
- 负值表示向相反方向移动。
- 例如：left:30px表示向右移动 30px，top:-50px表示向上移动 50px。
等效写法：

3. 相对定位的应用场景

核心用途：在不影响其他元素位置的前提下进行微调。
典型场景：
- 数学公式中的上下标位置调整。
- 购物车图标上的数字标记定位。
- 价格标签中的折扣标识定位。
- 导航菜单中的小箭头位置微调。
开发建议：
- 优先使用relative而非margin进行微调。
- 结合子绝父相布局时要注意本质原理（不一定要严格父子关系）。

4. 应用案例

1）例题：公式相对定位调整

实现步骤：
- 使用span包裹需要作为上标的数字。
- 设置span字体大小为 12px（主文字 20px）。
- 添加相对定位和bottom偏移：
注意事项：
- 偏移量需要根据实际字体大小调整。
- 可使用负值top或正值bottom实现相同效果。
- 微调后不影响其他元素的布局位置。

2. 知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
相对定位（relative）	通过`position: relative`将元素变为定位元素，不脱离标准流，可通过`left`/`right`/`top`/`bottom`微调位置	与`static`的区别：`static`是默认流布局，无法微调；与`absolute`的区别：`relative`不脱离文档流	⭐⭐
相对定位的参照基准	偏移量（如`left: 30px`）是相对于元素原始位置的左上角计算	易混淆：`left: 30px`是向右移动，`right: 30px`是向左移动（负值可反向）	⭐⭐
相对定位的应用场景	1. 不影响其他元素布局的微调（如公式中的上标） 2. 作为绝对定位（`absolute`）的父级参照物（子绝父相）	关键区别：`margin`会影响其他元素布局，而`relative`仅影响自身	⭐⭐⭐
偏移属性优先级	`left`与`right`同时设置时，`left`优先；`top`与`bottom`同时设置时，`top`优先	实际开发中建议统一使用`left`/`top`或`right`/`bottom`，避免冲突	⭐⭐
子绝父相的本质	绝对定位的参照物是最近的定位祖先元素（不一定是父元素），常用`relative`因其不破坏布局

3. 代码示例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>相对定位应用实例</title>
  <style>
    /* 基础样式 */
    .product {
      width: 300px;
      padding: 15px;
      border: 1px solid #eee;
      margin: 20px;
    }

    .price {
      font-size: 24px;
      color: #ff4400;
      font-weight: bold;
    }

    .original-price {
      font-size: 16px;
      color: #999;
      text-decoration: line-through;
      margin-left: 10px;
    }

    /* 1. 折扣标签 - 相对定位微调 */
    .discount {
      display: inline-block;
      padding: 2px 8px;
      background-color: #ff4400;
      color: white;
      font-size: 12px;
      border-radius: 3px;
      /* 核心：相对定位实现偏移 */
      position: relative;
      top: -3px;
      /* 相对于自身原位置向上偏移3px */
      left: 5px;
      /* 向右偏移5px */
    }

    /* 2. 购物车容器 */
    .cart {
      width: 50px;
      height: 50px;
      background-color: #ff4400;
      border-radius: 50%;
      color: white;
      text-align: center;
      line-height: 50px;
      font-size: 20px;
      margin: 20px;
      cursor: pointer;
    }

    /* 3. 购物车数字角标 - 相对定位 */
    .cart-badge {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-color: whitesmoke;
      text-align: center;
      color: #ff4400;
      font-size: 12px;
      border-radius: 50%;
      line-height: 20px;
      font-weight: bold;
      /* 核心：相对定位实现覆盖效果 */
      position: relative;
      top: -80px;
      /* 向上偏移35px（相对于自身原位置） */
      left: 55px;
      /* 向右偏移15px */
    }

    /* 辅助观察：显示相对定位元素仍占据原空间 */
    .hint {
      color: #666;
      font-size: 14px;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div class="product">
    <h3>无线蓝牙耳机</h3>
    <p>
      <span class="price">¥199</span>
      <span class="original-price">¥399</span>
      <span class="discount">5折</span>
    </p>
    <p class="hint">提示：折扣标签使用相对定位，不影响其他文字布局</p>
  </div>

  <div>
    <div class="cart">🛒</div>
    <span class="cart-badge">2</span>
    <p class="hint">提示：数字角标通过相对定位偏移，购物车图标仍占据原空间</p>
  </div>
</body>

</html>

13. 相对定位与固定定位

一、相对定位

相对定位适用于对元素进行微调，通过设置position: relative并调整left、right、top、bottom属性实现。相对定位的元素仍保留在标准流中，仅相对于自身原始位置偏移。若理解困难，可暂时跳过此部分，不影响后续学习。

关键点：

相对定位不脱离标准流，仅通过偏移属性调整位置。
适用场景为局部微调，非高频使用，优先级低于后续学习的定位方式。
图片展示建议使用<img>标签而非背景图，因图片通常为页面核心内容，背景图则多为装饰性元素。

二、固定定位

固定定位通过position: fixed实现，元素完全脱离标准流，且定位基准为浏览器视口（可视区域）。

属性特点对比

定位方式	特点描述	定位基准
relative	微调元素位置，保留原空间占用	自身原始位置
fixed	脱离标准流，固定于视口指定位置（如`left: 30px`表示距视口左边缘 30 像素）	视口，滚动时位置不变