CSS 1
CSS 简介
CSS (Cascading Style Sheets，层叠样式表）。是用来控制网页在浏览器中的显示外观的语言。
CSS 分类
1.内联样式表（行内样式表）
样式写到标签内部，可以控制当前标签的样式，特殊情况使用。
eg：
<p style="color: red;">这是一个段落</p>
2.内部样式表
写到<head>标签中，脱离结构，可以控制当前页面的所有标签，较为常用。
eg：
<style>
p{
color: red;
}
</style>
3.外部样式表
单独新建一个CSS文件，完全脱离结构，可以控制整个网站的所有标签，最常用。
注意：
需要在html中建立连接，即：
<link rel="stylesheet" href="style.css">
CSS 选择器
CSS 选择器是 CSS 规则的第一部分。它是选择 HTML 元素的方式。
1.基础选择器
基础选择器指的是有单个选择器组成，常见的有：类型选择器、类选择器、id选择器、通配符选择器
类型选择器
类型选择器选择某个类型的元素，也称为标签选择器。
eg：
<style>
div{
width: 200px;
}
</style>
补充：
CSS 层叠性：CSS 规则可以同时作用于一个元素，浏览器通过特定规则决定最终生效的样式。层叠性解决了样式冲突问题。
原则： 后定义的样式覆盖先前的样式。（就近原则）
CSS 书写规范&注释
-
选择器和大括号中间保留1个空格距离。
-
属性名和属性值中间也要保留1个空格。
-
每个CSS属性单独占一行。后期会打包压缩无需担心体积问题。
CSS的注释快捷键为ctrl+/，现在可利用AI实现注释，即单个属性注释可以在CSS属性后面打一个空格即可自动添加注释。
类选择器——最常用
类选择器选择某1个元素或者多个元素。(class)
eg：
<style>
.pink{
color: pink;
}
</style>
<p class="pink">这是一个段落</p>
注意：
-
类名自定义，不能是中文、纯数字
-
多个英文单词组成尽量使用 - 链接
-
命名有要意义，尽量见名知义
-
class属性可以有多类名中间用空格隔开
id选择器
选择 HTML 中具有特定 id 属性的唯一元素。即id只能出现一次。
eg：
<style>
#p1{
color: pink;
}
</style>
<p id="p1">这是一个段落</p>
id和类的区别：
类选择器：
语法：以.开头，后跟类名（如 .nav）.
作用：选择 class 属性的一个或多个元素.
特点：可以使用多次.
类似：名字，可以一名多人使用.
场景：后期修改样式基本都是类选择器.
id选择器：
语法：以#开头，后跟id名（如 #header）.
作用：选择特定id属性的唯一元素.
特点：同一页面中，id 值必须唯一（不能重复）.
类似：身份证的编号，唯一，只能用一次.
场景：后期主要是配合JavaScript 添加交互效果.
通配符选择器
通配符选择器可以选择 HTML 中所有的标签，进行样式修改。
eg：
<style>
*{
color: pink;
}
</style>
总结：
| 选择器类型 | 语法示例 | 匹配范围 | 复用性 | 典型使用场景 | 注意事项 |
|---|---|---|---|---|---|
| 类型选择器 | div { ... } | 匹配所有指定 HTML 标签元素 | 某一类型标签 | 全局样式重置、基础标签样式（如 body, p） | 避免滥用，可能导致样式冲突 |
| 类选择器 | .nav { ... } | 匹配所有含指定 class 的元素 | 多次使用 | 多元素共享样式 | 优先使用，避免与 ID 选择器冲突 |
| ID 选择器 | #header { ... } | 匹配唯一含指定 id 的元素 | 唯一性 | 唯一元素标识必须唯一，避免样式覆盖风险 | |
| 通配符选择器 | * { ... } | 匹配所有元素 | 全局覆盖 | 全局样式重置 | 性能较差，慎用 |
2.关系选择器
关系选择器是通过位置关系来选择目标元素(标签），可以更精准选择某些元素。
后代选择器——最常用
选择某个元素的后代元素（不限层级，包括子元素、孙元素等）。
eg：
<style>
div p {
color: red;
}
</style>
<div>
<p>111</p>
</div>
注意：
-
选择div标签里面的p元素，中间空格隔开。
-
父级div作用是限定，子元素p修改样式 。
-
父级和子集都可以是任意选择器。
子代选择器
选择某个元素的直接子元素 （仅限一层）。
选择div标签里面的第一层span元素，中间 > 隔开， 理解为亲儿子。
eg：
<style>
div>span {
color: red;
}
</style>
<div>
<span>111</span>
<p>
<span>222</span>
</p>
</div>
邻接兄弟选择器
选中紧跟在所选元素后面的第一个元素。
eg：
<style>
h2+p {
color: red;
}
</style>
<div>
<p>111</p>
<p>222</p>
<p>333</p>
<h2>222</h2>
<p>444</p>
<p>555</p>
<p>666</p>
</div>
通用兄弟选择器
选中紧跟在所选元素后面的所有元素。
eg：
<style>
h2~p {
color: red;
}
</style>
<div>
<p>111</p>
<p>222</p>
<p>333</p>
<h2>222</h2>
<p>444</p>
<p>555</p>
<p>666</p>
</div>
总结：
| 选择器 | 语法 | 选择范围 | 实例 |
|---|---|---|---|
| 后代选择器 | A B | 所有后代（跨层级） | ul li {color: pink;} |
| 子代选择器 | A > B | 直接子元素（仅一层） | div>span {color: pink;} |
| 邻接兄弟选择器 | A + B | 紧邻的下一个同级元素 | h2+p {}标题后的第一个p元素 |
| 通用兄弟选择器 | A ~ B | A之后的所有同级元素 | h2~p {} 标题后的所有p元素 |
CSS 文本样式
CSS 文本样式用于控制网页中文字的外观，包括字体、颜色、对齐、间距等
字体样式
给文字设置颜色、大小、粗体、装饰等效果。
| 字体样式 | 说明 |
|---|---|
| color | 设置字体颜色 |
| font-family | 字体族 |
| font-size | 字体大小 |
| font-style | 字体风格 |
| font-weight | 字体粗体 |
| text-decoration | 字体装饰 |
color字体颜色
1.关键字
这些颜色通常不会在生产环境的网站中使用，主要学习使用。
eg：
p {
color: pink;
}
2.十六进制
这个是开发最常用的。实际开发中，我们从设计稿直接复制即可。
eg：
p {
color: #f00;
}
3.rgb格式
rgb() 函数接受三个参数，分别表示颜色的 红、绿和蓝。
eg：
p {
color: rgb(255,0,0)
}
p {
color: rgba(255,0,0, 0.3)
}
文字透明，由最后一个数值取值0~1决定。
0完全透明，1完全不透明。
font-family字体族
给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。
属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体。即若第一个没有会自动跳过，查找第二个。
eg：
body {
font-family: Arial, Helvetica, sans-serif;
}
font-size字体大小
像素px
CSS 像素（CSS Pixel） 是 CSS 中用于定义长度、尺寸的单位（简写为 px），绝对单位。
不同浏览器默认字体大小不一样，谷歌默认16px，建议给body标签统一指定大小，做到浏览器统一。
eg：
p {
font-size: 18px;
}
font-style字体风格
font-style 用来打开和关闭文本 italic (斜体) 。
-
normal: 将文本设置为普通字体 (将存在的斜体关闭)
-
italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本
最常见： 让 em 或者 i 标签取消默认倾斜。
eg：
em {
font-style: normal;
}
font-weight字体粗体
font-weight 设置文字的粗体大小。
-
normal: 正常粗细
-
bold: 加粗
也可以用数字属性值：
-
400: 正常粗细
-
700: 加粗
eg：
h1 {
font-weight: normal;//400
}
text-decoration字体修饰
设置/取消字体上的文本装饰。
-
none: 取消文本装饰
-
underline: 下划线
-
overline：上划线
-
line-through：穿过文本的线/删除线
eg：
p {
text-decoration: underline;
}
总结
| 属性 | 描述 | 常见取值 | 示例 |
|---|---|---|---|
| color | 设置文本内容的颜色 | 颜色名称(red, blue)、十六进制(#ff0000)、RGB(rgb(255,0,0))、RGBA(rgba(255,0,0,0.5)) | color: red;color: #3366cc; |
| font-family | 设置文本的字体系列 | 无衬线字体 | font-family: "Microsoft YaHei", sans-serif; |
| font-size | 设置文本的大小 | px | font-size: 16px; |
| font-style | 设置文本的样式 | normal(正常)、italic(斜体) | font-style: normal; |
| font-weight | 设置文本的粗细数值(100-900)、关键字(normal, bold) | font-weight: 400;font-weight: 700; | |
| text-decoration | 设置文本的装饰效果 | none(无装饰)、underline(下划线)、overline(上划线)、line-through(中划线) | text-decoration: underline;text-decoration: linethrough; |
文本布局
作用于文本的对齐、缩进、间距等布局功能的属性。
| 字体样式 | 说明 |
|---|---|
| text-align | 文本对齐 |
| text-indent | 首行缩进 |
| letter-spacing | 文本字符间距 |
| line-height | 行高 |
text-align文本对齐
控制文本在它所在的块级盒子内如何水平对齐
-
left: 文本左对齐（默认）
-
right: 文本右对齐
-
center：文本水平居中对齐/文字居中
-
justify: 自动改变字间距，两端对齐/文本左右对齐
eg：
p {
text-align: center;
}
text-indent首行缩进
设置块级元素中文本行前面空格（缩进）的长度。
常见单位是em，相对单位，本元素的文字大小1em 等于当前元素的字体大小，如果当前元素没有大小，则按照父元素文字大小。
eg：
p {
text-indent: 2em;
}
letter-spacing字间距
用于设置文本字符的间距。
单位为px。
eg：
p {
letter-spacing: 2px;
}
line-height行高
设置文本每行之间的高。
-
数字px
-
数字不带单位（当前字体大小的倍数）
当行高等于盒子高度时，文本垂直居中。
注意理解行高：
eg：
p {
line-height: 1.5;
}
总结
| 属性名 | 作用 | 核心取值 | 注意事项 | 示例 |
|---|---|---|---|---|
| text-align | 设置文本的 | 水平对齐方式 | left、right、center、justify（两端对齐） | 仅对块级元素生效p { text-align: center; } |
| text-indent | 设置首行文本的缩进量 | 长度值（如 20px、2em） | 仅对块级元素生效p { text-indent: 2em; } | |
| letter-spacing | 设置文本中 | 字符之间的间距 | 数值负值可使字符重叠（需谨慎使用） | h1 {letter-spacing: 2px; } |
| line-height | 设置文本行与行之间的垂直间距 | 像素或者倍数 | 1.5 当前字体大小1.5倍行高等于高，单行文字垂直居中 | p { line-height: 1.6; } |
font简写
font 简写属性在一个声明中设置多个字体属性。
语法：
{
font:font-style font-weight font-size/font-height font-family;
}
-
其中font-size和font-family 是必须写
-
其他可以省略，默认显示
-
需要严格按照顺序书写
CSS 继承性
子元素自动继承父元素的某些 CSS 样式属性。
主要继承跟文字相关的样式属性，比如字体、颜色、文本对齐等。
但是子元素定义自己样式，会优先自己样式。
3.分组选择器
将不同的选择器组合在一起，使用逗号分割，也称为并集选择器。
语法：
div,
span {
color: pink;
}
4.伪类选择器
选择元素的特定状态或结构位置，符号是冒号(:)。
1.状态伪类选择器
1.1 链接伪类
链接伪类用于根据链接的不同状态（如未访问、悬停、点击等）为其添加样式。
| 链接伪类 | 作用 |
|---|---|
| a:link | 未访问链接的默认样式 |
| a:visited | 已访问链接的样式 |
| a:hover | 鼠标悬停在链接上时的反馈 |
| a:active | 链接被点击时的瞬时状态（按下到松开） |
伪类顺序规则：LAHA
a:link>a:visited>a:hover>a:active
可使用调试工具查看伪类状态：控制台—>选中语句—>右键—>Force state—>...
eg：
a {
text-decoration:none;
}
a:hover {
text-decoration: underline;
}
1.2 用户行为伪类
用户以某种方式和文档交互的时候应用，这些用户行为伪类，有时叫做动态伪类
| 动态伪类 | 作用 |
|---|---|
| :hover | 鼠标经过元素 |
| :focus | 获得焦点的元素（表单） |
2.结构伪类选择器
根据元素的位置选择目标元素。
| 结构伪类 | 作用 |
|---|---|
| :first-child | 一组兄弟元素中的第一个元素 |
| :last-child | 一组兄弟元素中的最后一个元素 |
| :nth-child(n) | 一组兄弟元素列表中第n个元素 |
n 的取值可以是：
-
数字。从1开始
-
关键字。odd 奇数 / even 偶数
-
公式。
· :nth-child(3n) 3的倍数，第3.6.9...个元素
· :nth-child(n+2) 第2个以及以后的元素
· :nth-child(-n+3) 前面3个元素
· 注意公式的n取值从0开始计算
3.表单伪类选择器
针对表单元素的状态。
| 表单伪类 | 作用 |
|---|---|
| :disabled | 表单禁用 |
| :checked | 选中状态，单选复选按钮 |
5.伪元素选择器
选择元素的特定部分（使用双冒号 ::）。
1.选择特定部分
| 伪元素选择器 | 作用 |
|---|---|
| ::first-line | 选择首行 |
| ::first-letter | 首字母 |
| ::placeholder | 选择input或者textarea占位符 |
选择特定部分使文字变色，增加修饰效果
2.插入内容
| 伪元素选择器 | 作用 |
|---|---|
| ::before | 元素内插入伪元素，作为第一个元素 |
| ::after | 元素内插入伪元素，作为最后一个元素 |
eg：
div::before {
content: "开始";
color: red;
}
div::after {
content: "结束";
color: red;
}
<div>文字</div>
效果： 开始 文字 结束
before和after是插入的为元素，特性类似内联元素。content属性是必须的，不能省略，没有内容填入空引号即可。
6.属性选择器
根据元素的属性特征来精准定位元素，实现更灵活的样式控制。
| 属性选择器 | 作用 |
|---|---|
| [属性] | 匹配包含指定属性的元素 |
| [属性=值] | 匹配属性值等于指定值的元素 |
| [属性^=值] | 匹配属性值以指定字符串开头的元素 |
| [属性$=值] | 匹配属性值以指定字符串结尾的元素 |
| [属性*=值] | 匹配属性值任意位置包含指定子串的元素 |
eg:
div[class="num1"] {
color: red;
}
CSS优先级
CSS三大特性：层叠性、继承性、优先级。
浏览器通过优先级来判断哪些属性值与一个元素最为相关。优先级是基于不同种类选择器组成的匹配规则。
原则：
-
优先级相等的时候，CSS 中最后的那个声明的样式将会被应用到元素上。（层叠遵循就近原则）
-
其余判断那个选择器权重高，优先执行那个样式。
-
权重是4位一组，是分开的层级，不能进位。
| 选择器类型 | 示例 | 权重值 | 优先级说明 |
|---|---|---|---|
| !important | color: red !important; | 无限大 | 强制覆盖所有规则（慎用） |
| 内联样式 | <div style="color: red"> | (1, 0, 0, 0) | 行内样式权重最高（1,0,0,0） |
| ID 选择器 | #myId | (0, 1, 0, 0) | 每个 ID 增加 0,1,0,0 |
| 类/属性/伪类 | .class, [type="text"] | (0, 0, 1, 0) | 每个类/属性/伪类增加 0,0,1,0 |
| 类型（标签）/伪元素 | div, ::after | (0, 0, 0, 1) | 每个标签/伪元素增加 0,0,0,1 |
| 通配符/继承 | *, 继承的样式 | (0, 0, 0, 0) | 通配符和继承权重最低 |
权重叠加
权重是累加的，每个选择器的层级权重相加。
可在调试工具查看权重。
盒子模型
所有的元素都被一个个的“盒子”包围着，学会盒子模型可以实现准确布局、处理元素排列的关键。
一般分为两种类型的盒子，一般分为 区块 盒子和 行内 盒子。
区块盒子(block)
-
盒子会产生换行
-
width 和 height 属性可以发挥作用
-
不设置宽度则默认和是父元素空间的 100%
-
内边距、外边距和边框会撑大元素
-
常见的比如： div、p、h、ul、table等
行内盒子(inline)
-
盒子不会产生换行。
-
width 和 height 属性将不起作用
-
垂直方向的内边距、外边距不起效果
-
水平方向的内边距、外边距会有效果
-
常见的比如： span、em、a、strong等
盒子模型组成-边框
border属性用于设置盒子边框。
语法：
border: 边框粗细 边框样式 边框颜色
-
边框由三部分属性值组成，中间必须用空格隔开
-
三部分属性没有先后顺序
| 边框样式 | 描述 | 视觉效果 |
|---|---|---|
| dotted | 点状边框 | 圆点组成的虚线 |
| dashed | 虚线边框 | 短横线组成的虚线 |
| solid | 实线边框 | 单一线条 |
也可根据方位名词:
-
border-top: 1px solid pink;
-
border-bottom: 1px solid pink;
-
border-left: 1px solid pink;
-
border-right: 1px solid pink;
盒子模型组成-圆角边框
border-radius 允许你设置元素的外边框圆角。
语法：
border-radius: 属性值;
使用的是 数字/百分比
eg：
.button {
border-radius: 10px;
}
-
胶囊圆角：长方形设置圆角为宽度的一半。
-
圆形： 正方形设置圆角为高度一般或者50%。
| 圆角写法 | 作用 |
|---|---|
| border-radius: 10px; | |
| border-radius: 10px 20px; | 左上 右下是10px，右上 左下 20px |
| border-radius：10px 20px 30px; | 左上是10px，右上 左下是20px，右下30px |
| border-radius： 10px 20px 30px 40px; | 左上10px，右上20px，右下30px，左下40px |
border-radius:左上角 右上角 右下角 左下角
-
顺时针记忆
-
中间使用空格隔开
-
不需要圆角设置为0
过渡
过渡效果（Transition） 用于在元素的属性值发生变化时，平滑地过渡（而不是瞬间切换）。
语法：
transition: 过渡属性 过渡时间;
-
属性值中间空格隔开
-
过渡属性如果都要变化可以写all
-
过渡时间单位是秒s，比如0.2s
盒子模型组成-内边距
内边距 (padding) 位于边框和内容区域之间。
内边距多个值之间用空格隔开，依旧顺时针记忆。
| 内边距写法 | 作用 |
|---|---|
| padding: 10px; | 上下左右4个内边距都是10px |
| padding: 10px 20px; | 上下内边距是10px，左右内边距是20px |
| padding: 10px 20px 30px; | 上是10px，左右是20px，下是30px |
| padding： 10px 20px 30px 40px; | 上10px，右20px，下30px，左40px（顺时针） |
单边设置：根据方位名词
-
padding-left: 10px;
-
padding-right: 10px;
-
padding-top: 10px;
-
padding-bottom: 10px;
盒子模型组成-外边距
外边距 (margin) 外边距是盒子周围一圈看不到的空间。它会把其他元素退推离盒子。
外边距多个值用空格隔开。
| 外边距写法 | 作用 |
|---|---|
| margin: 10px; | 上下左右4个外边距都是10px |
| margin: 10px 20px; | 上下外边距是10px，左右外边距是20px |
| margin: 10px 20px 30px; | 上是10px，左右是20px，下是30px |
| margin：10px 20px 30px 40px; | 上10px，右20px，下30px，左40px（上右下左） |
单边设置：根据方位名词
-
margin-left: 10px;
-
margin-right: 10px;
-
margin-top: 10px;
-
margin-bottom: 10px;
注意：行内元素左右外边距生效，上下外边距无效。其设置宽度和高度也无效。
区块元素可利用marign实现水平居中。
-
块级盒子必须由宽度
-
只需要设置左右外边距为auto
左右边距互相拉满，达到平衡。
盒子模型组成-外边距折叠&外边距塌陷
外边距折叠
区块元素上下外边距会出现折叠（合并）情况。
-
并列关系的区块元素
-
两个上下外边距将合并为一个外边距，其大小等于最大的单个外边距
外边距塌陷
区块元素上下外边距会出现塌陷情况
-嵌套关系的区块元素
- 对子盒子设置上下外边距会使得父盒子塌陷移动，即二者紧贴，一同移动
解决方法：
-
给父盒子添加上边框。
-
给父盒子添加上内边距。（换个角度解决问题）
-
给父盒子添加：
overflow: hidden;属性。(最简单)
盒子模型-尺寸计算
在 CSS 盒子模型的默认定义里，除了宽度和高度增加盒子大小之外，padding 和 border 都会让盒子变大。
即 盒子实际宽度= 宽度 + 边框2 + 内边距2
语法：
box-sizing: 属性值;
box-sizing 用于定义元素的 盒模型计算方式 ，控制元素的 width 和 height 是否包含 padding 和 border。
| 属性值 | 描述 |
|---|---|
| content-box | 默认值。元素的 width 和 height 仅包含内容区域，不包含 padding 和 border。理解： width = 内容的宽度 |
| border-box | 元素的 width 和 height 包含内容、padding和 border。理解： width = border + padding + 内容的宽度 |
盒子背景
background 用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等。
| 属性 | 作用 | 常用值 | 示例代码 |
|---|---|---|---|
| background-color | 设置元素背景颜色 | 颜色名称、十六进制、RGB、透明度 | background-color: #f0f0f0; |
| background-image | 设置背景图片 | url(image.jpg) | background-image:url(bg.png); |
| background-repeat | 控制背景图片是否重复 | repeat（默认）、no-repeat、repeat-x、repeat-y | background-repeat: no-repeat; |
| background-position | 定位背景图片位置 | x y （如 center top， 或者px、%单位） | background-position: center ; |
| background-size | 调整背景图片尺寸 | 默认auto、cover（覆盖）、contain（包含） 或者跟px、% | background-size: cover; |
| background-attachment | 背景是否随页面滚动 | scroll（默认 滚动的）、fixed(固定） | background-attachment: fixed; |
背景符合写法：
background:颜色 图片 重复 固定 位置/尺寸; //顺序无关
背景渐变
可通过 linear-gradient（线性渐变）和 radial-gradient（径向渐变）为元素添加渐变背景。
| 属性/方法 | 描述 | 示例代码 |
|---|---|---|
| linear-gradient(方向, 颜色1 位置,颜色2 位置...) | 线性渐变（方向可控） | background: linear-gradient(to right,#ff6b6b,#4ecdc4) background-image:linear-gradient(90deg, #ff6b6b 30%, #4ecdc4 70%) |
| radial-gradient(形状,颜色1,颜色2... ) | 径向渐变（形状和位置可控） | radial-gradient(circle, #ff9a9e, #fad0c4) |
线性渐变：
-
方向。 可以是方位名词，也可以是 deg(角度）
-
位置。 色标的位置。不是必须写的。
文字背景线性渐变：
background: linear-gradient(to right, pink, red); 设置背景渐变
-webkit-background-clip: text; 兼容性写法，照顾谷歌老版本浏览器
-webkitbackground-clip: text; 文字范围裁剪背景
-webkit-text-fill-color: transparent; 文本填充颜色设置为透明
盒子阴影
box-shadow 属性用于在元素的框架上添加阴影效果。
语法：
box-shadow: X 轴偏移量 Y 轴偏移量 模糊半径 扩散半径 颜色;
-
多个属性用空格隔开。
-
X轴偏移量和Y轴偏移量是必须要写，其余可以省略采取默认值。
-
默认是外阴影，如果改为内阴影要写 inset
eg：
li {
box-shadow: 0 15px 30px rgba(0,0,0,.1);
}
过渡
过渡效果（Transition） 用于在元素的属性值发生变化时，平滑地过渡（而不是瞬间切换）。
语法：
transition：过渡属性 过渡时间;
-
属性值中间用空格隔开。
-
过渡属性如果都要变化可以写all。
-
过渡时间单位是秒s，比如0.2s。
样式初始化
浏览器对 HTML 元素有默认样式（如 margin、padding、font-size），不同浏览器的默认样式可能不一致，导致跨浏览器兼容性问题。
小项目
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
ol {
list-style: none;
}
a {
text-decoration: none;
}
中大型项目
引入Normalize.css文件，
官网下载地址： necolas.github.io/normalize.c…
文字溢出显示省略号
单行文字溢出显示省略号：
-
text-overflow: ellipsis; 文字溢出显示省略号
-
white-space: nowrap; 文字不换行
-
overflow: hidden; 元素溢出时隐藏
多行行文字溢出显示省略号：
-
display: -webkit-box; /* 旧版弹性盒子布局 */
-
-webkit-box-orient: vertical; /* 文本垂直排列 */
-
-webkit-line-clamp: 3; /* 限制显示行数 */
-
overflow: hidden; /* 隐藏溢出内容 */
-
text-overflow: ellipsis; /* 文本溢出显示省略号 */
字体图标
字体图标（Icon Fonts）是一种将图标以字体形式嵌入网页的技术，允许开发者像使用文字一样通过 CSS 控制图标的样式（如颜色、大小、阴影等）。
字体图标由设计师提供/字体库下载。
| 图标库 | 特点 | 官网链接 |
|---|---|---|
| Font Awesome | 图标最全，支持免费版和 Pro 付费版 | fontawesome.com |
| Bootstrap Icons | Bootstrap 生态内图标，简单易用 | icons.getbootstrap.com |
| icomoon | IcoMoon 最早推出了第一个自定义图标字体生成器 | icomoon.io |
| iconfont | 阿里字体库，包含淘宝图标库和阿里妈妈图标库（免费） | www.iconfont.cn/ |
根据提供的压缩包，用link方式引入css文件。
表格相关样式——合并相邻边框
语法：
boder-collapse:collapse; //合并单元格边框
精灵图
CSS 精灵图（CSS Sprites）是将多个小图标或图像合并到一张大图中，通过调整 background-position 属性来显示特定部分的图像技术。
在线测量工具：www.tugaigai.com/online_ps/
eg：
.box1 {
background-position: 0 -169px;
}
