青见春山的知识世界

外观

CSS ​

作者:青见春山
发表于:2026-07-24
字数统计:13173 字
预计阅读44分钟

层叠样式表基础、选择器、字体文本属性、盒模型、浮动、定位、背景、CSS3新特性等。

1. 简介 ​

  1. 用来美化页面，布局页面
  2. 层叠样式表 Cascading Style Sheets（CSS样式表/级联样式表）
  3. 对象：文本内容，图片外形，版面布局，外观显示样式

结构HTML和样式CSS相分离

2. CSS基本知识 ​

2.1 语法规范 ​

  1. 由选择器和一条或多条声明构成

选择器：交给谁去改，指定HTML标签

声明：改成什么样

  1. 例如：
css
h1 {
  color: red;
  font-size: 25px;
}

（记得加分号表示结束）

  1. 属性和属性值以键值对形式出现：一个属性：一个值；

  2. 注意：和；都是英文状态

  3. 典型例子：

html
<head>
  <style>
    h4 {
      color: blue;
      font-size: 100px;
    }
  </style>
</head>

2.2 代码风格 ​

  1. 用展开格式，更直观
css
h4 {
  color: blue;
  font-size: 100px;
}
  1. 样式建议用小写，如样式选择器，属性名，属性值关键字
  2. 空格规范
css
h3 {
  color: pink;
}

属性值前面，冒号后面，选择器（标签）和大括号中间都要有空格

3. CSS基础选择器 ​

用来根据不同的需求把不同的标签选择出来

css
h3 {
  color: pink;
}

以上CSS找到所有的h3标签，并设置样式为红色。

基础选择器由单个选择器组成

3.1 标签选择器 ​

用HTML标签名称作为选择器，为某一类标签制定统一的CSS样式

css
标签名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ........
}

比如选出所有的 <div> 标签，可以快速为同类型标签设置统一样式，但无法设计差异化

3.2 类选择器 ​

差异化选择不同的标签，单独选一个或某几个标签

css
.类名 {
    属性1: 属性值1;
    ...
}

例如：

css
.red {
  color: red;
}

结构需要用 class 属性来调用

html
<div class="red">变红色</div>
  1. 可以理解为给标签起了个名字来表示它，类名不能用标签
  2. 长名词或词组可以用中横线来为选择器命名，例如 .star-sing
  3. 不要使用纯数字，中文等命名，尽量用英文字母（拼音）
  4. 命名要有意义，且有一定规范

样式点定义，结构类调用，一个或多个，开发最常用

3.3 多类名 ​

一个标签可以有多个类名，这些类名都可以选择出这个标签

html
<div class="red font20">你好</div>

类名要用空格隔开，这个标签就可以分别具有这些类名的样式

  1. 可以把标签元素相同的样式（共同的部分）放到一个类里
  2. 这些标签都可以调用这个公共的类，然后再调用自己独有的类
  3. 节省代码，统一修改更方便

3.4 id选择器 ​

HTML以id属性来设置id选择器，CSS中选择器以#定义。

css
#id名 {
    属性1: 属性值1;
    ...
}

如：

css
#nav {
  color: red;
}

将nav元素中的内容设置为红色

id属性只能在每个HTML文档中出现一次

3.5 类与id选择器区别 ​

  1. 类选择器好比人的名字，一个人可以有多个名字，一个名字可以被多个人使用。
  2. id选择器好比身份证号，具有唯一性
  3. 类选择器用于修改样式，id选择器一般用于页面唯一性的元素上

3.6 通配符选择器 ​

使用 * 定义，表示选取页面中所有元素（标签）

css
* {
  属性1: 属性值1;
}

不需要调用，自动给所有的元素使用样式

例如清除所有的元素标签的内外边距：

css
* {
  margin: 0;
  padding: 0;
}

4. CSS字体属性 ​

4.1 字体系列 ​

用 font-family 属性定义字体系列

css
p {
  font-family: "Microsoft Yahei", Arial;
}
  • 各种字体之间用英文逗号隔开（先看第一个字体有无，无则下一个）
  • 若有空格隔开的多个单词组成的字体，外面要加引号
  • 尽量使用系统默认自带字体，增强普适性

4.2 字体大小 ​

用 font-size 来定义字体大小

css
p {
  font-size: 20px; /* px即为像素，网页常用单位 */
}

可以给body指定整个页面的文字大小，标题要单独指定

4.3 字体粗细 ​

font-weight 设置文本字体粗细

css
p {
  font-weight: bold;
}
  • normal 默认不加粗
  • bold 加粗
  • 100-900 400=normal，700=bold（数字后无单位）

让加粗标签不加粗：

css
font-weight: normal;

4.4 字体样式 ​

font-style 设置文本风格

css
p {
  font-style: normal;
}
  • normal 默认字体
  • italic 斜体

一般是将倾斜的标签（em，i）改为不倾斜字体

4.5 字体复合属性 ​

css
body {
  font: font-style font-weight font-size/line-height font-family;
}

必须按照上面的顺序书写，各个属性间以空格隔开

font-size 和 font-family 一定要有，其他默认可忽略

5. CSS文本属性 ​

5.1 文本颜色 ​

color 定义文本颜色

css
div {
  color: red;
}
  • 预定义颜色：red, green
  • 十六进制：#FF0000（开发常用）
  • RGB代码：rgb(255,0,0) 或 rgb(100%,0%,0%)

5.2 文本对齐 ​

text-align 用来设置文本内容的水平对齐方式

css
div {
  text-align: center;
}
  • left 左对齐（默认）
  • right 右对齐
  • center 居中对齐

5.3 装饰文本 ​

text-decoration 用来添加文本修饰，下划线，删除线，上划线等

css
div {
  text-decoration: underline;
}
  • none 默认没有装饰线
  • underline 下划线（a标签自带）
  • overline 上划线
  • line-through 删除线

删除下划线：text-decoration: none;

5.4 文本缩进 ​

text-indent 用来指示文本的第一行缩进，通常是段落首行缩进

css
div {
  text-indent: 10px;
}

div {
  text-indent: 2em;
}

em 是一个相对单位，是当前元素 font-size 的 1 个文字的大小

5.5 行间距 ​

line-height 用来设置行间的距离，可以控制文字行与行之间的距离

css
p {
  line-height: 26px;
}

改变的是上下间距的问题，上下均分

6. CSS引入方式 ​

6.1 内部样式表（嵌入式引入） ​

写到html页面内部，把css抽取出来放到 <style> 标签中

html
<style>
  div {
    color: red;
  }
</style>

一般放在 <head> 中

未实现结构样式完全分离

6.2 行内样式表（行内式引入） ​

在元素标签内部的 style 属性中设置 css，适用于修改简单样式

html
<div style="color: red; font-size: 12px">青春不常在</div>

在双引号中，写法要符合 css 规范

可以控制当前的标签设置样式

6.3 外部样式表（外链式/链接式引入） ​

样式单独写到 CSS 文件，后把 CSS 文件引入 HTML

  1. 新建一个后缀为 .css 的样式文件，把 css 代码放入其中
  2. 在 HTML 页面，使用 <link> 标签引入这个文件
html
<link rel="stylesheet" href="css文件路径" />

rel 定义当前文档与被链接文档的关系 href 定义所链接外部式样的 URL

7. Chrome调试工具 ​

按下 F12 键 / 右击界面空白处，检查

  • Ctrl + 滚轮 可以放大代码大小
  • 左为 HTML，右为 CSS。CSS 可改动数值和查看颜色
  • Ctrl + 0 复原浏览器大小
  • 若点击元素，右侧没有样式输入，有可能是类名或者样式引用错误
  • 有样式，但样式前有黄色叹号提示，则是样式属性书写错误

8. Emmet语法 ​

  • 通过简写快速生成 HTML 和 CSS 代码
  • 提高开发效率

9. CSS复合选择器 ​

9.1 后代选择器（包含选择器） ​

css
元素1 元素2 { 样式声明 }

表示选择元素1里面的元素2（后代元素）

css
ul li { 样式声明 }  /* 选择 ul 里面所有的 li 标签元素 */
  1. 元素1和2中间用空格隔开
  2. 1为父级，2为子级，最终选择的是2
  3. 2只要是1的后代即可
  4. 1和2可以是任意的基础选择器

9.2 子代选择器 ​

css
元素1 > 元素2 { 样式声明 }

表示选择1里面的所有直接后代（子元素）元素2

css
div > p { 样式声明 }   /* 选择 div 里面所有最近一级的 p 标签元素 */

2 必须是儿子

9.3 并集选择器 ​

可以选择多组标签，同时为他们定义相同的样式

通过英文逗号连接

css
元素1, 元素2 { 样式声明 }

表示选择元素1和元素2

css
ul, div { 样式声明 }  /* 选择 ul 和 div 标签元素 */

逗号可以理解为和的意思，并集选择器通常用于集体声明

9.4 伪类选择器 ​

可以向某些选择器添加特殊的效果，如选择第几个元素

最大的特点是用冒号（:）表示，比如 :hover，:first-child

链接伪类选择器

要按照 LVHA 的顺序声明

  • a:link 选择所有未被访问的链接
  • a:visited 选择所有已被访问的链接
  • a:hover 选择鼠标指针位于其上的链接
  • a:active 选择活动链接（鼠标按下未弹起的链接）
css
/* a 是标签选择器 所有的链接 */
a {
  color: gray;
}

/* :hover 是链接伪类选择器 鼠标经过 */
a:hover {
  color: red;
}

9.5 focus 伪类选择器 ​

用于选取获得焦点（光标）的表单元素

这个选择器主要是针对于表单元素来说

css
input:focus {
  background-color: yellow;
}

10. 新增选择器 ​

10.1 属性选择器（★★） ​

属性选择器，按照字面意思，都是根据标签中的属性来选择元素

  • 属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器
  • 属性选择器也可以选择出来自定义的属性

示例代码：

css
/* 只选择 type =text 文本框的input 选取出来 */
input[type="text"] {
  color: pink;
}

/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^="icon"] {
  color: red;
}

/* 选择首先是section 然后 具有class属性 并且属性值 必须是 data结尾的这些元素 */
section[class$="data"] {
  color: blue;
}

10.2 结构伪类选择器 ​

结构伪类选择器主要根据文档结构来选择器元素，常用于根据父级选择器里面的子元素

10.2.1 E:first-child ​

匹配父元素的第一个子元素 E

html
<style>
  ul li:first-child {
    background-color: red;
  }
</style>

<ul>
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
  <li>列表项四</li>
</ul>

E:last-child 则是选择到了最后一个 li 标签

10.2.2 E:nth-child(n)（★★★） ​

匹配到父元素的第 n 个元素

  • 匹配到父元素的第 2 个子元素
    css
    ul li:nth-child(2) {
}
  • 匹配到父元素的序号为奇数的子元素
    css
    ul li:nth-child(odd) {
} /* odd 是关键字 奇数的意思（3个字母） */
  • 匹配到父元素的序号为偶数的子元素
    css
    ul li:nth-child(even) {
} /* even（4个字母） */
  • 匹配到父元素的前 3 个子元素
    css
    ul li:nth-child(-n + 3) {
}

选择器中的 n 是怎么变化的呢？

因为 n 是从 0，1，2，3.. 一直递增

所以 -n+3 就变成了：

  • n=0 时 -0+3=3
  • n=1 时 -1+3=2
  • n=2 时 -2+3=1
  • n=3 时 -3+3=0
  • ...

常用的结构伪类选择器是： nth-child(n) {...}

10.2.3 E:nth-child 与 E:nth-of-type 的区别 ​

  • E:nth-child(n) 匹配父元素的第n个子元素E，也就是说，nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
  • E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E，也就是说，对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
html
<style>
  ul li:nth-child(2) {
    /* 字体变成红色 */
    color: red;
  }

  ul li:nth-of-type(2) {
    /* 背景变成绿色 */
    background-color: green;
  }
</style>

<ul>
  <li>列表项一</li>
  <p>乱来的p标签</p>
  <li>列表项二</li>
  <li>列表项三</li>
  <li>列表项四</li>
</ul>

10.3 伪元素选择器（★★★） ​

伪元素选择器可以帮助我们利用 CSS 创建新标签元素，而不需要 HTML 标签，从而简化 HTML 结构

示例 demo

html
<style>
  div {
    width: 200px;
    height: 200px;
    background-color: pink;
  }
  /* div::before 权重是2 */
  div::before {
    /* 这个content是必须要写的 */
    content: "我";
  }
  div::after {
    content: "小猪佩奇";
  }
</style>
<body>
  <div>是</div>
</body>

注意：

  • before 和 after 创建一个元素，但是属于行内元素
  • 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
  • 语法：element::before {}
  • before 和 after 必须有 content 属性
  • before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
  • 伪元素选择器和标签选择器一样，权重为 1

11. CSS的元素显示模式 ​

元素（标签）以什么方式进行显示，比如 <div> 自己占一行

HTML一般分为块元素和行元素两种类型

11.1 块元素 ​

常见的有 <h1>-<h6>, <p>, <div>, <ul>, <ol>, <li>

<div> 是最典型的块元素

特点：

  • 自己独占一行
  • 宽度、高度、内外边距都可以控制
  • 宽度是容器的 100%
  • 是一个容器或盒子，可以放行内或块级元素

注意：

文字类的元素不能使用块级元素

<p> 标签主要存放文字，所以不能放块级，特别是 <div>、<h1>-<h6> 同理

11.2 行内元素 ​

常见的有 <a>, <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <span>

<span> 是最典型的行内元素，或内联元素

特点：

  • 相应元素在一行上，一行可以显示多个
  • 高宽设置无效
  • 默认宽度是本身内容的宽度
  • 行内元素只能容纳文本和其他行内元素

注意：

链接里面不能再放链接

特殊情况 <a> 里面可以放块级元素，但给 <a> 转换一下块级模式更安全

11.3 行内块元素 ​

常见的有 <img/>, <input/>, <td>

同时具有块元素和行元素的特点

特点：

  • 和相邻行内元素在一行，但会有空白缝隙，一行可以显示多个
  • 默认宽度即本身内容的宽度
  • 宽度、高度和内外边距都可以控制

11.4 元素显示模式转换 ​

  1. 一个模式的元素需要另一种模式的特性
css
/* 转换为块元素 */
display: block;

/* 转换为行内元素 */
display: inline;

/* 转换为行内块 */
display: inline-block;
  1. Snipaste
  • F1 截图
  • F3 在桌面置顶显示
  • 点击图片 alt 可以取色（shift 切换取色模式）
  • esc 取消图片显示
  1. 单行文字垂直居中

让文字的行高等于盒子的高度

以上空隙为准，若行高小于盒子高度，文字会偏上

12. CSS背景 ​

12.1 背景颜色 ​

css
background-color: 颜色值;

一般情况下背景是透明的：transparent

12.2 颜色渐变 ​

必须加浏览器的私有前缀

css
background: linear-gradient(起始方向，颜色1，颜色2...);
background: -webkit-linear-gradient(left, red, blue);

12.3 背景图片 ​

实际开发常见于 logo 及装饰性小图片或超大的背景图片（非常便于控制位置）

css
background-image: none | url(url);
  • none 无背景图（默认）
  • url 使用绝对或相对地址指定背景图像

背景图片后面的地址，千万不要忘记加 url，同时里面的路径不要加引号

12.4 背景平铺 ​

css
background-repeat: repeat | no-repeat | repeat-x | repeat-y;
  • repeat 横纵平铺
  • no-repeat 不平铺
  • repeat-x 横向
  • repeat-y 纵向

12.5 背景图片位置 ​

css
background-position: x y;

x y 可以用方位名词或精确单位

  • length：百分数 / 由浮点数和单位标识符组成的长度值
  • position：top / center / bottom / left / right 方位名词

注意：

  1. 若两个都是方位名词，前后两个值顺序无关
  2. 若只指定一个方位名词，则第二个值默认居中对齐
  3. 若为精确单位，前 x 后 y
  4. 若只指定一个数值，则一定是 x，另一个默认垂直居中

12.6 背景图片附着 ​

设置背景图片是否固定或者随页面的其他部分滚动

css
background-attachment: scroll | fixed;
  • scroll：随对象内容滚动
  • fixed：背景图像固定

12.7 背景复合写法 ​

css
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
background: transparent url(image.jpg) repeat-y fixed top; /* 以空格隔开 */

12.8 背景色半透明 ​

css
background: rgba(0, 0, 0, 0.3);

最后一个是 alpha，0 是 100% 透明，1 是不透明

习惯上 0.3 的 0 要省略

背景透明是盒子背景半透明，盒子内容不受影响

13. CSS的三大特性 ​

13.1 层叠性 ​

样式重叠：就近原则，哪个近执行哪个

样式不冲突，不会层叠，比如颜色和文字，就会都保留

13.2 继承性 ​

子标签会继承父标签的某些样式，如文本颜色和字号

text-, font-, line- 这些元素开头的可以继承，以及 color 属性

行高的继承性

css
body {
  font: 12px/1.5 Microsoft YaHei;
}

行高可跟单位可不跟

若子元素未设置行高，则行高 = 子元素文字大小 * 1.5

子元素可以根据自己文字大小自动调整行高

13.3 优先级 ​

选择器相同，则执行层叠性

选择器不同，则根据选择器权重执行

注意：

  1. 权重由四位数字组成，但不会有进位
  2. id 选择器 > 类选择器 > 元素选择器
  3. 从左往右判断，若某一位数值相同，则判断下一位数值
  4. 记忆：通配符和继承权重为 0，标签选择器为 1，类（伪类）选择器为 10，id 选择器 100，行内样式表为 1000，!important 无穷大
  5. 继承的权重为 0，若该元素未被选中，则权重为 0

权重叠加

针对复合选择器：

  • div ul li 0,0,0,3
  • .nav ul li 0,0,1,2
  • a:hover 0,0,1,1
  • .nav a 0,0,1,1

总结：越精确越优先执行

14. CSS注释 ​

css
/* 需要注释的内容 */

快捷键：ctrl + /

15. CSS盒子模型 ​

  1. 网页布局：准备好相关网页元素，基本都是盒子 box -- 利用 CSS 设置好盒子样式，摆放到相应位置 -- 往盒子里装内容

本质：利用 CSS 摆盒子

  1. 盒子模型组成：边框，外边距，内边距，实际内容

CSS3 中可以通过 box-sizing 来指定盒模型，有 2 个值：即可指定为 content-box、border-box，这样我们计算盒子大小的方式就发生了改变

可以分成两种情况：

  • box-sizing: content-box 盒子大小为 width + padding + border（以前默认的）
  • box-sizing: border-box 盒子大小为 width

如果盒子模型我们改为了 box-sizing: border-box，那 padding 和 border 就不会撑大盒子了（前提 padding 和 border 不会超过 width 宽度）

15.1 边框 border ​

边框宽度（粗细，px）边框样式（实线，虚线，点线）边框颜色

css
border: border-width / border-style / border-color;

border-style

  • none 没有边框（默认）
  • solid 单实线（最常用）
  • dashed 虚线
  • dotted 点线

边框简写

css
border: 1px solid red; /* 没有顺序 */

边框分开写法

css
border-top: 1px solid red; /* 只设定上边框 */

表格的细线边框（针对table标签）

css
border-collapse: collapse;
/* 表示相邻边框合并在一起 */

边框会额外增加盒子的大小

测量盒子大小的时候，不要量边框

测量时包含了边框，则要用 width / height 减去边框宽度

15.2 内边距 ​

边框与内容之间的距离

css
padding-left / right / top / bottom

简写：

css
padding: 5px; /* 上下左右5px */
padding: 5px 10px; /* 上下5px 左右10px */
padding: 5px 10px 20px; /* 上5，左右10，下20 */
padding: 5px 10px 20px 30px; /* 上5，右10，下20，左30 */

若盒子已有宽度和高度，再指定内边框会撑大盒子

要让 width / height 减去多出来的内边距大小即可保持一致

15.3 外边距 ​

控制盒子与盒子之间的距离

css
margin-left / right / top / bottom

简写的方式与 padding 同

外边距可以让块级盒子水平居中

css
.header {
  width: 960px;
  margin: 0 auto;
}

盒子必须指定了宽度 width

盒子的左右外边距都设置为 auto

行内元素或者行内块元素水平居中只需给父级元素添加 text-align: center

15.4 外边距合并 ​

相邻块元素垂直外边距的合并

上面的块元素有下外边距，下面的块元素有上外边距，则两者的垂直边距不是和，而是取两者较大值

只给一个盒子添加 margin 值即可解决此问题

嵌套块元素垂直外边距的塌陷

两个嵌套关系的块元素，父，子都有上边距，则父元素会塌陷较大的外边距值

可以为父元素定义上边框 / 上内边距 / 添加 overflow: hidden

15.5 清除内外边距 ​

css
* {
  /* * 为通配符 */
  padding: 0; /* 清除内边距 */
  margin: 0; /* 清除外边距 */
}

行内元素尽量只设置左右内外边距，不要设置上下内外边距

15.6 圆角边框 ​

css
border-radius: length; /* radius 半径 */

参数值可以为数值或百分比的形式

若是正方形，想设置为一个圆，将数值修改为高度或宽度的一半即可，或写 50%

简写：左上角，右上角，右下角，左下角

15.7 盒子阴影 ​

css
box-shadow: h-shadow v-shadow blur spread color inset;

默认的是外阴影，但外阴影 outset 不可直接写

盒子阴影不占空间，不影响其他盒子排列

原先盒子没有阴影，当鼠标经过盒子添加阴影效果：

css
div:hover {
  box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.3);
}

15.8 文字阴影 ​

css
text-shadow: h-shadow v-shadow blur color;

例如：

css
text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3);

16. CSS浮动 ​

16.1 传统网页布局 ​

盒子如何进行排列顺序

标准流 / 浮动 / 定位

16.2 标准流 ​

标签按照规定好的默认方式排列

  • 块级元素独占一行，自上向下排列（div, hr, p, h1-h6, ul, ol, dl, form, table）
  • 行内元素按照顺序自左向右排列，碰到父级元素边缘则自动换行（span, a, i, em）

最基本的布局方式

16.3 浮动 ​

可以让多个块级元素一行内排列

多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动

css
选择器 {
  float: 属性值;
}
  • none 元素不浮动
  • left 左浮动
  • right 右浮动

特性：

  1. 浮动元素会脱离标准流（脱标），然后移动到指定位置
  2. 浮动的盒子不再保留原先的位置，浮在表面
  3. 浮动元素一行内显示且元素顶部对齐
  4. 浮动元素有行内块元素特性

若块级盒子没有宽度，则默认和父级一样宽，加了浮动后，大小根据内容决定

  1. 浮动的元素是互相贴靠在一起的，若父级宽度装不下，则会另起一行

先用标准流的父元素排列上下位置，后内部子元素采取浮动排列左右位置

一个元素浮动，理论上其他兄弟元素也要浮动

浮动的盒子只会影响后面的标准流，不会影响前面的标准流

16.4 清除浮动 ​

当父级盒子很多，不方便给高度，但子盒子浮动又不占位置，父级盒子高度会变为 0，会影响下面的标准流盒子

清除浮动是为了清除浮动元素造成的影响

若父盒子本身有高度，则不需要清除

清除浮动后，父级会根据浮动的子盒子自行检测高度

语法：

css
选择器 {
  clear: 属性值;
}
  • left 左浮动影响
  • right 右浮动影响
  • both 同时清除左右

清除策略：闭合浮动

1.额外标签法（隔墙法）

在浮动元素末尾添加一个空的标签

html
<div style="clear: both;"></div>

要求这个新的空标签必须是块级元素

2.父级添加 overflow

给父级加代码，将属性值设置为 hidden auto scroll

css
overflow: hidden;

3.:after 伪元素法

给父元素添加：

css
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1;
}

双伪元素清除浮动：

css
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

17. CSS属性书写顺序 ​

建议遵循以下顺序（从上到下，从外到内，从上到下）：

  1. 布局定位属性：display / position / float / clear / visibility / overflow
  2. 自身属性：width / height / margin / padding / border / background
  3. 文本属性：color / font / text-decoration / text-align / vertical-align / white-space / break-word
  4. 其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background: linear-gradient...

17.1 页面布局整体思路 ​

  1. 确定版心（可视区）宽度
  2. 分析每个页面的行模块（标准流），列模块（浮动）
  3. 先确定每个列的大小，再确定其位置
  4. 先有结构，后有样式
  5. 先理清楚布局结构，再写代码

17.2 网页布局总结 ​

通过盒子模型，大部分 html 标签是一个盒子。

通过 CSS 浮动、定位可以让每个盒子排列成为网页。

一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

  • 标准流：可以让盒子上下排列或者左右排列，垂直的块级盒子显示就用标准流布局。
  • 浮动：可以让多个块级元素一行显示或者左右对齐盒子，多个块级盒子水平显示就用浮动布局
  • 定位：定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

18. CSS定位 ​

18.1 为什么使用定位 ​

  1. 某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子
  2. 当滚动窗口的时候，盒子是固定屏幕某个位置的。

18.2 浮动与定位区别 ​

  1. 浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。
  2. 定位可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。

18.3 定位组成 ​

将盒子定在某一个位置，即摆放盒子，按照定位的方式移动盒子

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

18.4 定位模式 ​

用于指定一个元素在文档中的定位方式。

定位模式 (position)

在 CSS 中，通过 position 属性定义元素的定位模式，语法如下：

css
选择器 {
  position: 属性值;
}

定位模式决定元素的定位方式，它通过 CSS 的 position 属性来设置，其值可以分为四个：

  • static 静态定位
  • relative 相对定位
  • absolute 绝对定位
  • fixed 固定定位

18.4.1 静态定位(static) - 了解 ​

静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的 none，静态定位 static，不要定位的时候用。

css
选择器 {
  position: static;
}

静态定位按照标准流特性摆放位置，没有边偏移。

静态定位在布局时几乎不用

18.4.2 相对定位(relative) - 重要 ​

相对定位是元素在移动位置的时候，是相对于它自己原来的位置来说的。

css
选择器 {
  position: relative;
}

相对定位特点：

  1. 移动位置的时候参照点是自己原来的位置。
  2. 原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

相对定位并没有脱标

18.4.3 绝对定位（absolute）- 重要 ​

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

css
选择器 {
  position: absolute;
}

  1. 完全脱标 —— 完全不占位置；

  2. 父元素没有定位，则以浏览器为准定位（Document 文档）。

  3. 父元素有定位

    元素将依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）为参考点移动位置。

子绝父相

子级是绝对定位的话，父级要用相对定位。

①子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。

②父盒子需要加定位限制子盒子在父盒子内显示。

③父盒子布局时，需要占有位置，因此父亲只能是相对定位。

相对定位经常用来作为绝对定位的父级

总结：因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

注意：子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。

18.4.4 固定定位(fixed) - 重要 ​

固定定位是元素固定于浏览器可视区的位置。

主要使用场景：可以在浏览器页面滚动时元素的位置不会改变。

css
选择器 {
  position: fixed;
}

固定定位的特点：

  1. 以浏览器的可视窗口为参照点移动元素。

    跟父元素没有任何关系，不随滚动条滚动。

  2. 固定定位不再占有原先的位置。

固定定位也是脱标的，其实固定定位也可以看做是一种特殊的绝对定位。

  • 完全脱标—— 完全不占位置；
  • 只认浏览器的可视窗口

浏览器可视窗口 + 边偏移属性 来设置元素的位置；

跟父元素没有任何关系；单独使用

不随滚动条滚动。

固定定位(position)的应用

固定定位小技巧：固定在版心左侧位置。

  1. 让固定定位的盒子 left: 50%. 走到浏览器可视区（也可以看做版心）的一半位置。
  2. 让固定定位的盒子 margin-left: 版心宽度的一半距离。多走版心宽度的一半位置

就可以让固定定位的盒子贴着版心右侧对齐了。

css
.fixed {
  position: fixed; /* 1. 走浏览器宽度的一半 */
  left: 50%; /* 2. 利用margin 走版心盒子宽度的一半距离 */
  margin-left: 100px;
}

18.4.5 粘性定位(sticky) - 了解 ​

粘性定位可以被认为是相对定位和固定定位的混合。(Sticky 粘性的)

css
选择器 {
  position: sticky;
  top: 10px;
}

粘性定位的特点：

  1. 以浏览器的可视窗口为参照点移动元素（固定定位特点）
  2. 粘性定位占有原先的位置（相对定位特点）
  3. 必须添加 top、left、right、bottom其中一个才有效

跟页面滚动搭配使用。兼容性较差，IE 不支持。

18.5 边偏移（方位名词） ​

决定了该元素的最终位置。

就是定位的盒子移动到最终位置，有 top、bottom、left 和 right 4 个属性。

定位的盒子有了边偏移才有价值。

一般情况下，凡是有定位地方必定有边偏移。

注意：

  • 边偏移需要和定位模式联合使用，单独使用无效；
  • top 和 bottom 不要同时使用；
  • left 和 right 不要同时使用。

18.6 定位叠放次序 z-index ​

控制盒子前后次序，以防盒子重叠

css
选择器 {
  z-index: 1;
}
  • 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
  • 如果属性值相同，则按照书写顺序，后来居上；
  • 数字后面不能加单位。

注意：z-index 只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

18.7 定位的拓展 ​

绝对定位的盒子居中 ​

注意：加了绝对定位/固定定位的盒子不能通过设置 margin: auto 设置水平居中。

绝对定位水平居中：

  1. left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；
  2. margin-left: -100px;：让盒子向左移动自身宽度的一半

定位特殊特性 ​

绝对定位和固定定位也和浮动类似。

  1. 行内元素添加绝对或者固定定位，可以直接设置高度和宽度。
  2. 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小是内容的大小。
  • 可以用 inline-block 转换为行内块
  • 可以用浮动 float 默认转换为行内块（类似，并不完全一样，因为浮动是脱标的）
  • 绝对定位和固定定位也和浮动类似，默认转换的特性转换为行内块。

所以说，一个行内的盒子，如果加了浮动、固定定位和绝对定位，不用转换，就可以给这个盒子直接设置宽度和高度等。

脱标的盒子不会触发外边距塌陷 ​

浮动元素、**绝对定位（固定定位）**元素的都不会触发外边距合并的问题。（我们以前是用 padding border overflow 解决的）

也就是说，我们给盒子改为了浮动或者定位，就不会有垂直外边距合并的问题了。

绝对定位（固定定位）会完全压住盒子 ​

浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）

但是绝对定位（固定定位）会压住下面标准流所有的内容。

浮动之所以不会压住文字，因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素

19. 元素的显示与隐藏 ​

目的是让一个元素在页面中消失或者显示出来

场景：类似网站广告，当我们点击关闭就不见了，但是我们重新刷新页面，会重新出现

19.1 display 显示（重点） ​

css
display: none; /* 隐藏对象 */
display: block; /* 除了转换为块级元素之外，同时还有显示元素的意思。 */

特点：display 隐藏元素后，不再占有原来的位置。

后面应用极其广泛，搭配 JS 可以做很多的网页特效。实际开发场景：

配合后面 js 做特效，比如下拉菜单，原先没有，鼠标经过，显示下拉菜单，应用极为广泛

19.2 visibility 可见性（了解） ​

visibility 属性用于指定一个元素应可见还是隐藏。

css
visibility: visible; /* 元素可视 */
visibility: hidden; /* 元素隐藏 */

特点：visibility 隐藏元素后，继续占有原来的位置。（停职留薪）

  • 如果隐藏元素想要原来位置，就用 visibility: hidden
  • 如果隐藏元素不想要原来位置，就用 display: none（用处更多，重点）

19.3 overflow 溢出（重点） ​

overflow 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么。

css
overflow: visible; /* 默认 */
overflow: hidden; /* 隐藏溢出的内容 */
overflow: scroll; /* 滚动条 */
overflow: auto; /* 浏览器自动判断 */

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局。

但是如果有定位的盒子，请慎用 overflow: hidden，因为它会隐藏多余的部分。

20. CSS高级技巧 ​

20.1 精灵图 ​

为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵技术（也称 CSS Sprites、CSS 雪碧）。

核心原理：

将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求即可

使用：

使用精灵图核心：

  1. 精灵技术主要针对于背景图片使用。把多个小背景图片整合到一张大图片中。

  2. 这个大图片也称为 sprites 精灵图或者雪碧图

  3. 移动背景图片位置，此时可以使用 background-position。

  4. 移动的距离就是这个目标图片的 x 和 y 坐标。注意网页中的坐标有所不同

    千万注意网页中的坐标：x 轴右边走是正值，左边走是负值，y 轴同理。

  5. 因为一般情况下都是往上往左移动，所以数值是负值。

  6. 使用精灵图的时候需要精确测量每个小背景图片的大小和位置。

精灵图是有诸多优点的，但是缺点很明显。

  1. 图片文件还是比较大的。
  2. 图片本身放大和缩小会失真。
  3. 一旦图片制作完毕想要更换非常复杂。

20.2 字体图标 iconfont ​

字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。

展示的是图标，本质属于字体。

优点：

  • 轻量级：一个图标字体要比一系列的图像要小。一旦字体加载了，图标就会马上渲染出来，减少了服务器请求
  • 灵活性：本质其实是文字，可以很随意的改变颜色、产生阴影、透明效果、旋转等
  • 兼容性：几乎支持所有的浏览器，请放心使用

注意：字体图标不能替代精灵技术，只是对工作中图标部分技术的提升和优化。

结构和样式复杂一点的小图片，要用精灵图

使用步骤

字体图标是一些网页常见的小图标，我们直接网上下载即可。因此使用可以分为：

  1. 字体图标的下载
  2. 字体图标的引入（引入到我们html页面中）
  3. 字体图标的追加（以后添加新的小图标）

1.字体图标的下载：

推荐下载网站：

它允许用户选择所需要的图标，使它们成一字型。该字库内容种类繁多，非常全面。国外服务器，打开网速较慢。免费

这个是阿里妈妈 M2UX 的一个 iconfont 字体图标字库，包含了淘宝图标库和阿里妈妈图标库。可以使用 AI 制作图标上传生成。免费

2.字体图标的引入

下载完毕之后，注意原先的文件不要删，后面会用。

  1. 把下载包里面的 fonts 文件夹放入页面根目录下
  2. 不同浏览器所支持的字体格式是不一样的，字体图标之所以兼容，就是因为包含了主流浏览器支持的字体文件。
  3. 在 CSS 样式中全局声明字体：简单理解把这些字体文件通过 css 引入到我们页面中。

一定注意字体文件路径的问题。以下代码直接复制即可：

css
@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?7kkyc2");
  src:
    url("fonts/icomoon.eot?7kkyc2#iefix") format("embedded-opentype"),
    url("fonts/icomoon.ttf?7kkyc2") format("truetype"),
    url("fonts/icomoon.woff?7kkyc2") format("woff"),
    url("fonts/icomoon.svg?7kkyc2#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

这个字体一定要和 @font-face 里的一样

3.字体图标的追加

原来的字体图标不够用了，我们需要添加新的字体图标到原来的字体文件中。

把压缩包里面的 selection.json 从新上传，然后选中自己想要新的图标，从新下载压缩包，并替换原来的文件即可。

20.3 CSS三角 ​

css
div {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-color: red green blue black;
  line-height: 0;
  font-size: 0;
}
  1. 用 CSS 边框可以模拟三角效果
  2. 宽度高度为 0
  3. 4 个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明即可
  4. 为了照顾兼容性低版本的浏览器，加上 font-size: 0; line-height: 0;

20.4 CSS用户界面样式 ​

更改一些用户操作样式，以便提高更好的用户体验。

20.4.1 更改用户的鼠标样式 cursor ​

css
li {
  cursor: pointer;
}

设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。

  • default 默认光标（通常是一个箭头）
  • pointer 手形光标（链接和可点击元素）
  • text 文本光标（可编辑文本）
  • move 移动光标（可拖动元素）
  • not-allowed 禁止光标

20.4.2 表单轮廓 outline ​

给表单添加 outline: 0; 或者 outline: none; 样式之后，就可以去掉默认的蓝色边框。

css
input {
  outline: none;
}

outline 属性可以设置以下几个值：

  1. outline-color：设置轮廓的颜色。
  2. outline-style：设置轮廓的样式（如实线、虚线、点状线等）。
  3. outline-width：设置轮廓的宽度。

例如，下面的 CSS 代码将为所有链接（<a> 标签）添加一个蓝色的、实线的、2 像素宽的轮廓：

css
a {
  outline: 2px solid blue;
}

轮廓线不会影响元素的布局，它总是在元素的外部绘制，不会增加元素的尺寸。这与 border 属性不同，后者会改变元素的尺寸。

此外，outline 属性还可以设置为 none，用于移除元素的轮廓线，这在某些情况下可以用于重写浏览器的默认样式。

css
input:focus {
  outline: none;
}

上面的代码表示当输入框获得焦点时，不会有轮廓线显示。

outline 属性是一个非矩形轮廓，即使元素的尺寸是矩形的，轮廓线也可以是圆形或其他形状，这取决于元素的内容区域。这使得 outline 在创建焦点指示器或视觉突出显示时非常有用。

20.4.3 防止表单域拖拽 resize ​

实际开发中，我们文本域右下角是不可以拖拽的。

css
textarea {
  resize: none;
}

20.5 vertical-align 属性 ​

经常用于设置图片或者表单（行内块元素）和文字垂直对齐。

官方解释：用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。

语法：

css
vertical-align: baseline | top | middle | bottom;

20.5.1 图片、表单和文字对齐 ​

图片、表单都属于行内块元素，默认的 vertical-align 是基线对齐。

  • baseline 基线对齐（默认）
  • top 顶部对齐
  • middle 中部对齐（图片和文字垂直居中对齐）
  • bottom 底部对齐

20.5.2 解决图片底部默认空白缝隙问题 ​

图片底侧会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。

解决方法：

  1. 给图片添加 vertical-align: middle | top | bottom 等（推荐）
  2. 把图片转换为块级元素 display: block;

20.5.3 溢出的文字用省略号显示 ​

20.5.3.1 单行文本溢出显示省略号 ​
css
/* 1. 先强制一行内显示文本 */
white-space: nowrap; /* 默认 normal 自动换行 */

/* 2. 超出的部分隐藏 */
overflow: hidden;

/* 3. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;
20.5.3.2 多行文本溢出显示省略号 ​

有较大兼容性问题

css
/* 1. 超出的部分隐藏 */
overflow: hidden;

/* 2. 文字用省略号替代超出的部分 */
text-overflow: ellipsis;

/* 3. 弹性伸缩盒子模型显示 */
display: -webkit-box;

/* 4. 限制在一个块元素显示的文本的行数 */
-webkit-line-clamp: 2;

/* 5. 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;

21. 常见布局技巧 ​

21.1 margin 负值的运用 ​

  1. 让每个盒子 margin 往左侧移动 -1px 正好压住相邻盒子边框

先执行浮动，再执行左移

  1. 鼠标经过某个盒子的时候，提高当前盒子的层级即可

（如果没有定位，则加相对定位（保留位置），如果有定位，则加 z-index）

21.2 文字围绕浮动元素 ​

巧妙运用浮动元素不会压住文字的特性

21.3 行内块的巧妙运用 ​

页码在页面中间显示：

  1. 把这些链接盒子转换为行内块，之后给父级指定 text-align: center;
  2. 利用行内块元素中间有缝隙，并且给父级添加 text-align: center; 行内块元素会水平且居中

21.4 CSS三角强化 ​

html
<style>
  .box1 {
    width: 0;
    height: 0;

    /* 把上边框宽度调大 */
    /* border-top: 100px solid transparent;
        border-right: 50px solid skyblue; */
    /* 左边和下边的边框宽度设置为0 */
    /* border-bottom: 0 solid blue;
        border-left: 0 solid green; */

    /* 1.只保留右边的边框有颜色 */
    border-color: transparent red transparent transparent;
    /* 2. 样式都是solid */
    border-style: solid;
    /* 3. 上边框宽度要大， 右边框 宽度稍小， 其余的边框改为 0 */
    border-width: 100px 50px 0 0;
  }
</style>
<body>
  <div class="box1"></div>
</body>

21.5 CSS 初始化 ​

不同浏览器对有些标签的默认值是不同的，为了消除不同浏览器对 HTML 文本呈现的差异，照顾浏览器的兼容，我们需要对 CSS 初始化

简单理解：CSS 初始化是指重设浏览器的样式。（也称为 CSS reset）

每个网页都必须首先进行 CSS 初始化。

Unicode 编码字体：

把中文字体的名称用相应的 Unicode 编码来代替，这样就可以有效的避免浏览器解释 CSS 代码时候出现乱码的问题。

比如：

  • 黑体 \9ED1\4F53
  • 宋体 \5B8B\4F53
  • 微软雅黑 \5FAE\8F6F\96C5\9ED1
css
/* 把我们所有标签的内外边距清零 */
* {
  margin: 0;
  padding: 0;
}

/* em 和 i 斜体的文字不倾斜 */
em,
i {
  font-style: normal;
}

/* 去掉li 的小圆点 */
li {
  list-style: none;
}

img {
  /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
  border: 0;
  /* 取消图片底侧有空白缝隙的问题 */
  vertical-align: middle;
}

button {
  /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
  cursor: pointer;
}

a {
  color: #666;
  text-decoration: none;
}

a:hover {
  color: #c81623;
}

button,
input {
  /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
  font-family:
    Microsoft YaHei,
    Heiti SC,
    tahoma,
    arial,
    Hiragino Sans GB,
    "\5B8B\4F53",
    sans-serif;
}

body {
  /* CSS3 抗锯齿形 让文字显示的更加清晰 */
  -webkit-font-smoothing: antialiased;
  background-color: #fff;
  font:
    12px/1.5 Microsoft YaHei,
    Heiti SC,
    tahoma,
    arial,
    Hiragino Sans GB,
    "\5B8B\4F53",
    sans-serif;
  color: #666;
}

.hide,
.none {
  display: none;
}

/* 清除浮动 */
.clearfix:after {
  visibility: hidden;
  clear: both;
  display: block;
  content: ".";
  height: 0;
}

.clearfix {
  *zoom: 1;
}

22. CSS新特性 ​

22.1 CSS过渡 ​

从一个状态渐渐过渡到另一个状态，经常和 :hover 一起搭配使用

css
transition: 要过渡的属性 花费时间 运动曲线 何时开始;

/* 所有属性变化，则写all  时间单位为s 可以设置延迟触发时间 */

谁做过渡给谁加

运动曲线：

  • linear 匀速
  • ease 逐渐慢下来（默认）
  • ease-in 加速
  • ease-out 减速
  • ease-in-out 先加速后减速
css
/* 多个属性 */
transition:
  width 0.5s,
  height 0.5s;

22.2 图标变模糊 -- CSS3 滤镜 filter ​

filter CSS 属性将模糊或颜色偏移等图形效果应用于元素

语法：

css
filter: 函数(); /* 例如： filter: blur(5px);  blur 模糊处理 数值越大越模糊 */

22.3 计算盒子宽度 -- calc 函数 ​

calc() 此 CSS 函数让你在声明 CSS 属性值时执行一些计算

语法：

css
width: calc(100% - 80px);

括号里面可以使用 + - * / 来进行计算

22.4 伪元素的应用 ​

在 CSS 中，伪元素有两种主要的形式：

  1. ::before - 在元素的内容前面插入新内容。
  2. ::after - 在元素的内容之后插入新内容。

这两个伪元素经常用于与 content 属性一起使用，来插入生成的内容，如添加图标、背景图像或文本。

示例：使用 ::before 和 ::after 伪元素 ​

css
.my-element {
  position: relative;
}

.my-element::before {
  content: "Hello";
  position: absolute;
  top: 0;
  left: 0;
}

.my-element::after {
  content: "World";
  position: absolute;
  bottom: 0;
  right: 0;
}

在上面的示例中，::before 伪元素在 .my-element 的内容前插入了文本 "Hello"，而 ::after 伪元素在内容后插入了 "World"。

应用到单选按钮（Checkbox 和 Radio） ​

伪元素也可以用于自定义表单控件的外观，比如单选按钮（radio buttons）和复选框（checkboxes）。以下是如何使用伪元素来自定义单选按钮的示例：

css
/* 隐藏默认的单选按钮 */
[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
}

/* 使用伪元素添加自定义样式 */
[type="radio"]::before {
  content: "";
  display: inline-block;
  width: 15px; /* 小圆点的宽度 */
  height: 15px; /* 小圆点的高度 */
  border: 2px solid #000;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: middle;
}

[type="radio"]:checked::after {
  content: "";
  display: inline-block;
  width: 5px; /* 选中标记的宽度 */
  height: 5px; /* 选中标记的高度 */
  background-color: #000;
  border-radius: 50%;
  position: relative;
  top: 2.5px;
  left: 2.5px;
}

在这个示例中：

  • [type="radio"] 选择器用于隐藏默认的单选按钮样式。
  • [type="radio"]::before 伪元素在单选按钮前添加了一个圆形的框。
  • [type="radio"]:checked::after 伪元素在单选按钮被选中时在其内部添加了一个填充的小圆点。

注意事项 ​

  • 使用伪元素时，content 属性是必须的，它定义了要生成的内容。
  • 伪元素可以用于添加装饰性的内容，也可以用于布局和样式的调整。
  • 伪元素不存在于 DOM 中，因此它们不会影响页面的文档结构或可访问性。
  • 伪元素可以与 JavaScript 和 CSS 动画一起使用，为页面添加动态效果。