当前位置：首页 > news >正文

CSS入门

news 来源：原创 2025/5/25 8:02:42

1. 前言

本文档面向的读者是有一点HTML基础，希望学习CSS的开发者。文档内容分为基础、布局、进阶三部分。基础部分介绍CSS中常用和通用的元素样式、选择器以及盒模型。布局部分介绍如何在HTML中排列元素。进阶部分介绍CSS的高级内容，包括动画、函数、响应式设计等。文档附录包含了一些速查表，方便读者查阅。

2. CSS基础

2.1. CSS简介

2.1.1. CSS是什么

CSS是Cascading Style Sheets的缩写，翻译为层叠样式表。CSS是一种样式表语言，用来描述HTML文档的表现方式，如字体、色彩、背景色等等。我们先从一段简单的CSS代码开始。

代码1 CSS示例

p {color: red;
}

这段代码的效果是将HTML文档中全部 <p> 元素里的文字设置成红色。

大括号里面的是CSS规则，格式为

属性: 值;

每条规则占一行，以分号结尾。本文提到的符号都是半角符号。属性和值之间以冒号分割，属性和值的前后可以添加空格或其他空白字符。 color 是文字色彩属性， red 表示将这个属性设置为红色。单独的一条规则叫做声明。大括号前面的 p 表示将这条规则应用到 <p> 元素，叫做选择器。

由选择器、大括号、声明共同构成的整个结构叫做规则集，简称规则。CSS就是由许多个类似的规则集构成的。学习CSS就是要弄清楚下面3个问题：

属性：HTML标签有哪些样式属性？
属性值：这些属性可以设置为哪些值，对应的样式是什么？
选择器：如何将规则应用到HTML元素？

CSS支持注释，注释是为了解释设计思路和理由，不影响元素样式。注释内容包围在 /* 和 */ 之间，如：

代码2 CSS注释

p {color: red; /* 将段落文字设置为红色。 */
}

2.1.2. CSS和HTML

前面我们说过，CSS是描述HTML文档样式的语言。如何将CSS和HTML结合起来呢？方法是在HTML中添加 <link> 标签。

代码3 在HTML中引入CSS

<html><head><link href="style.css" rel="stylesheet" /></head><body><!-- 其他内容 --></body>
</html>

浏览器在展示HTML时，按照 <link> 标签加载CSS，按照样式规则展示HTML文档。

2.2. 属性值和单位

CSS规则由属性和属性值构成。很多属性值带有单位。本章介绍属性值和单位，作为后续部分的基础。

每个CSS属性都可以有一个或多个值。例如：

p {font-size: 1.2em;height: 100px;letter-spacing: 0;width: 80%;background-color: #00ff00;color: red;
}

在例子中， font-size 是字体尺寸， height 和 width 是元素高度和宽度， background-color 是元素背景色彩， color 是文字色彩， letter-spacing 是字间距。这里主要介绍属性值和单位，后面会详细介绍这些属性。

从例子中可以看到，属性值可以是带单位的值（ 1.2em 、 100px ）、不带单位的数值（ 0 ）、百分比（ 80% ）、十六进制色彩值（ #00ff00 ）、已定义名字（ red ）等。我们逐一介绍这些属性值和单位。

em 是直接上级元素的文字尺寸。在没有歧义时，可以将直接上级元素简称为上级元素。 1.2em 表示元素的文字大小是上级元素的1.2倍。由于是描述长度的， em 叫做距离单位。由于是相对于上级元素的， em 叫做相对距离单位。下表列出了常用的相对距离单位。附录包含一份更完整的表格。

表1 相对距离单位
em	上级元素字符高度
rem	根元素字符高度
ex	小写字母高度
cap	大写字母高度
ch	字符“0”的宽度
ic	字符“水”的宽度

px 表示CSS像素（也叫参考像素）。像素是屏幕能显示的最小单位。不同屏幕中像素的大小不同，为了统一规范，CSS使用“CSS像素”概念，在上下文没有歧义时也简称为像素。CSS像素定义为 1/96 英寸。1英寸是2.54厘米，因此1像素是0.26毫米。请注意，在不同设备上CSS像素实际占据的空间可能有所不同，未必一定是0.26毫米。这里只是一个简单的介绍。要了解更多具体细节，请查阅MDN和其他参考资料。

px 是绝对距离单位。下面列出了常用的绝对距离单位。附录包含更完整的表格。

表2 绝对距离单位
cm	厘米
mm	毫米
in	英寸 1in = 2.54cm = 96px
pt	点 1pt = 1/72 in
px	像素 1px = 1/96 in

如果某个距离的值是0，比如 0px 或 0cm ，此时单位已经不重要了，可以省略，简写为0，如 letter-spacing: 0; 。

80% 是百分比数据类型。很多关于尺寸的属性可以使用百分比。比如例子中的 width: 80%; 表示元素宽度占上级元素宽度的80%。

#00ff00 和 red 是色彩值，色彩也是CSS数据类型。色彩值可以是色彩名（ red ）、十六进制色彩记号（ #00ff00 ）、 rgb 函数（ rgb(31 120 50) ）等。

十六进制色彩记号有4种语法：

代码4 十六进制色彩记号语法

#RGB        /* 三值语法，#RRGGBB的缩写 */
#RGBA       /* 四值语法，#RRGGBBAA的缩写 */
#RRGGBB     /* 六值语法 */
#RRGGBBAA   /* 八值语法 */

R、G、B、A分别是红色、绿色、蓝色和色彩通量，值从00到ff。色彩通量为00表示完全透明，ff表示完全不透明。为了方便引用色彩值，CSS定义了色彩名，下面是部分常用色彩名。附录包含更完整的列表。

代码5 常见色彩名

aqua    #00ffff
black   #000000
blue    #0000ff
fuchsia #ff00ff
gray    #808080
green   #008000
lime    #00ff00
maroon  #800000
navy    #000080
olive   #808000
purple  #800080
red     #ff0000
silver  #c0c0c0
teal    #008080
white   #ffffff
yellow  #ffff00

2.3. 基础样式

现在我们来学习CSS中的基础样式。所有HTML元素几乎都支持这些样式。

2.3.1. 文字

字体和文本样式分为两类，一类描述字符样式，如大小、色彩、笔画粗细等。另一类描述字符布局，如对齐方向、字间距、行间距等。

字符样式

控制字符样式最主要属性的是 font-family ，决定了元素中文字的字体族。

span {font-family: "Times New Roman", "新宋体", serif;
}

font-family 支持设置多个字体族，以逗号分隔。这么做可以为没有缺少字体族的电脑提供备选项。浏览器按照顺序依次选择可用字体族。如果全部不可用，则使用系统默认字体。如果字体族名字包含空格，必须使用双引号包围起来，如 "Times New Roman" 。除了字体族名字，CSS还定义了几个通用字体族。

表3 通用字体族
通用字体族	说明
serif	衬线字体，笔画有装饰，粗细不同
sans serif	无衬线字体，笔画无装饰，粗细均匀
cursive	手写体
fantasy	艺术体
monospace	等宽字体
fangsong	仿宋体
kai	楷体

另一个重要属性是 font-size 字号，决定字符大小。 font-size 值可以是带有距离单位的值、百分比、或者尺寸名字。

font-size: 32px;
font-size: 1em;
font-size: 80%;
font-size: small;

这里面的 small 是绝对尺寸，是一个比 medium （大部分浏览器中 font-size 的默认值）小的值。至于具体是多少，或者比 medium 小多少，CSS没有定义，由浏览器自行决定。类似的值还有：

表4 绝对尺寸在大部分浏览器中的值
绝对尺寸	在大部分浏览器中的值
xx-small	9-10px
x-small	10-12px
small	13-14px
medium	16px
large	18px
x-large	24px
xx-large	32px
xxx-large	48px

下面我们介绍另外三个影响字符样式的属性： font-weight 、 font-stretch 和 font-style ，它们控制笔画粗细、字符宽度和倾斜度。要理解它们，首先要明白字体和字体族的区别，弄清楚字形、字体、字体族3个概念。

表5 字形、字体和字体族
字形	字符的表现形式。
字体	有相同外观和排版尺寸的字形的集合。
字体族	字体的集合，其中的字体风格相同，区别在于笔画粗细、字宽或倾斜度不同。

一个字体族包含若干个样式相近的字体，它们的区别在于笔画粗细（ font-weight ）、字符宽度（ font-stretch ）和倾斜度（ font-style ）不同。

font-weight 叫做字重，取值从1到1000，越大笔画越粗。字重的默认值是 normal ，定义为400。另一个常用值是 bold ，定义为700。

font-stretch 叫做字宽，用于在水平方向上拉伸或压缩字符，值是百分比。小于100%表示压缩，大于100%是拉伸，默认值是100%。

表6 font-stretch值
名字	值
ultra-condensed	50%
extra-condensed	62.5%
condensed	75%
semi-condensed	87.5%
normal	100%
semi-expanded	112.5%
expanded	125%
extra-expanded	150%
ultra-expanded	200%

font-style 表示字符的倾斜度，取值可以是 normal （不倾斜）或 italic （倾斜）。

此外还有几个属性： color 是字体色彩。 text-decoration 是文字修饰，例如 text-decoration: underline dotted red; 在文字下方绘制一个红色虚线下划线。 text-shadow 是文字阴影, text-shadow: #fc0 2px 4px 8px; 表示绘制颜色 #fc0 的文字阴影，阴影相对文字在x轴偏移2像素，y轴偏移4像素，阴影渐变半径8像素。

表7 重要字符样式属性
属性	说明	示例
font-family	字体族	"Times New Roman"
font-size	字体大小	1.2rem
font-weight	字重，笔画粗细	bold
font-stretch	字宽	100%
font-style	倾斜度	italic
color	字体色彩	red
text-decoration	文字装饰	underline dotted red
text-shadow	文字阴影	#fc0 2px 4px 8px

字符布局
除了字符自身的样式属性外，还有一些属性决定了字符的排列方式。 text-align 是文字排列方向，可以是 left 左对齐、 right 右对齐、 center 剧中、 justify 两端对齐。 line-height 是一行文字占用的高度，包括字符和字符上下的空白空间。 letter-spacing 是字间距， word-spacing 是词间距。

表8 字符布局属性
属性说明示例
text-align 文本对齐方式 left
line-height 行高 4px
letter-spacing 字间距 1px
word-spacing 词间距 6px

表8 字符布局属性
属性	说明	示例
text-align	文本对齐方式	left
line-height	行高	4px
letter-spacing	字间距	1px
word-spacing	词间距	6px

2.3.2. 背景

background-color 决定了元素背景色彩，值可以是色彩名、十六进制色彩值、色彩函数等。

background-color: red;
background-color: #bbff00;
background-color: rgb(255 255 128);
background-color: rgb(117 190 218 / 50%);
background-color: transparent;

这里的 rgb(117 190 218 / 50%) 等效于 #75beda80 ，斜杠 / 后面的百分比是色彩通量（alpha）， 0% 表示透明，100% 表示全彩。色彩通量也可以使用数值表示，0是透明，1.0是全彩。如果希望将背景设置为透明，可以使用 background-color: transparent; 。

CSS不仅支持设置背景色的色彩通量，也支持设置元素的色彩通量。

opacity: 1;   /* 透明 */
opacity: 0.6; /* 半透明 */
opacity: 0;   /* 透明 */

如果希望使用图片作为背景，可以使用 background-image 属性。

background-image: url("background.png");

背景图片的位置和大小由 background-position 和 background-size 控制。

background-position: top;        /* 顶部水平居中 */
background-position: bottom;     /* 底部水平居中 */
background-position: left;       /* 左对齐垂直居中 */
background-position: right;      /* 右对齐垂直居中 */
background-position: center;     /* 水平和垂直居中 */background-position: top right;  /* 顶部右对齐 */
background-position: 25% 75%;    /* 距离左边25%，顶边75%处 */
background-position: 1cm 2cm;    /* 距离左边1cm，顶边2cm处 */background-size: cover;          /* 缩放图片覆盖元素，可能裁剪图片。 */
background-size: contain;        /* 缩放图片到能够让元素完整包含的最大尺寸，以空白填充剩余空间。 */background-size: 50%;            /* 设置图片宽度。 */
background-size: 12px;           /* 设置图片宽度。 */background-size: 3em 25%;        /* 设置图片宽度和高度。 */
background-size: auto 6px;       /* 设置图片宽度和高度。 */

如果图片尺寸较小，希望用图片铺满元素，可以使用 background-repeat 属性。

background-repeat: repeat space;

background-repeat 属性有两个值，分别表示在水平、垂直方向上如何重复排列图片。可取的值有

表9 background-repeat值
值	说明
repeat	重复排列图片，铺满整个元素。最后一个图片可能被裁剪。
space	重复排列图片，首个最左，末尾右边，均匀排列，间以空白。
round	类似space，适当放大图片，覆盖间隔。
no-repeat	不重复排列图片。

为了简化编码，CSS提供了单值简写。

表10 background-repeat单值语法
单值	等价于双值
repeat-x	repeat no-repeat
repeat-y	no-repeat repeat
repeat	repeat repeat
space	space space
round	round round
no-repeat	no-repeat no-repeat

2.3.3. 边框

边框样式由3个主要属性控制： border-width 是边框宽度， border-style 是边框样式，比如虚线、短横线、实线等， border-color 是边框色彩。

代码6 边框属性

border-width: 4px;
border-width: 2px 1.5em;              /* 顶底 | 左右 */
border-width: 1px 2em 1.5cm;          /* 顶 | 左右 | 底 */
border-width: 1px 2em 0 4rem;         /* 顶 | 右 | 底 | 左 */border-color: red;
border-color: red #f015ca;           /* 顶底 | 左右 */
border-color: red yellow green;      /* 顶 | 左右 | 底 */
border-color: red yellow green blue; /* 顶 | 右 | 底 | 左 */border-style: none;    /* 不显示 */
border-style: dotted;  /* 圆点 */
border-style: dashed;  /* 短虚线 */
border-style: solid;   /* 实线 */
border-style: double;  /* 双实线 */
border-style: groove;  /* 浮雕 */
border-style: ridge;   /* 浮雕 */border-style: dotted solid;               /* 顶底 | 左右  */
border-style: hidden double dashed;       /* 顶 | 左右 | 底 */
border-style: none solid dotted dashed;   /* 顶 | 右 | 底 | 左 */

此外还有两个重要的属性， border-radius 是边框圆角半径， border-image 是边框图片。

border-radius: 30px;
border-radius: 25% 10%;                   /* 顶底 | 左右 */
border-radius: 10% 30% 50% 70%;           /* 顶 | 右 | 底 | 左 */
border-image: url("/images/border.png");

轮廓是在边框外侧，紧贴边框绘制的线条，和边框有些类似。我们常见的输入框，周围的细线就是轮廓。轮廓的样式和边框几乎一样。

代码7 轮廓属性

outline-width /* 轮廓宽度 */
outline-color /* 轮廓色彩 */
outlint-style /* 轮廓样式 */

除了属性比边框少，轮廓和边框还有一个重要区别，这一点在盒模型一节介绍。

2.4. 选择器

对属性和属性值有了一定了解之后，我们开始介绍选择器。选择器决定了属性值应用到哪个元素上。首先介绍最基础的选择器，然后介绍如何将选择器组合起来，实现更丰富的效果。最后介绍按照元素状态或位置进行的选择的伪选择器。

2.4.1. 基本选择器

我们重温第一个例子：

p {color: red;
}

这段规则会应用到全部 <p> 元素上。因为按照元素进行选择，这个选择器叫做元素选择器。此外还有按照元素的class属性值进行选择的类选择器，按照id属性值选择的标识选择器，以及更通用的，按照一般属性值进行选择的属性选择器。最后一个是选择全部元素的通用选择器。

代码8 基本选择器语法

元素 { 样式声明 }                     /* 元素选择器，按元素选择。 */
.类名 { 样式声明 }                    /* 类选择器，按class属性选择。 */
元素.类名 { 样式声明 }                /* 类选择器可以指定适用元素。 */
#标识 { 样式声明 }                    /* 标识选择器，按id属性选择。 */
[属性] { 样式声明 }                   /* 属性选择器 */
[属性=值] { 样式声明 }              
[属性~=值] { 样式声明 }             
[属性|=值] { 样式声明 }             
[属性^=值] { 样式声明 }             
[属性$=值] { 样式声明 }             
[属性*=值] { 样式声明 }             
元素[属性=值] { 样式声明 }            /* 属性选择器可以指定适用元素。 */
[属性1=值1][属性2=值2] { 样式声明 }   /* 属性选择器并集。 */
*{ 样式声明 }                         /* 通用选择器，选择全部元素。 */

这里规则相对复杂的是属性选择器，我们逐一介绍。

代码9 属性选择器

[attr]{ 样式声明 }            /* 选择拥有属性 attr 的元素。*/
[attr=value] { 样式声明 }     /* 选择拥有属性 attr ，并且值是 value 的元素。*/
[attr~=value] { 样式声明 }    /* 如果元素的 attr 属性值是以空格分隔的列表，且列表包含 value ，选择元素。*/
[attr|=value] { 样式声明 }    /* 如果元素的 attr 属性值以 value 或 value- 为前缀，选择元素。*/
[attr^=value] { 样式声明 }    /* 如果元素的 attr 属性值以 value 为前缀，选择元素。*/
[attr$=value] { 样式声明 }    /* 如果元素的 attr 属性值以 value 为后缀，选择元素。*/
[attr*=value] { 样式声明 }    /* 如果元素的 attr 属性值以 value 为子串，选择元素。*/

2.4.2. 组合起来

选择器列表和组合器是将多个选择器结合起来，实现更强大功能的方法。选择器列表允许多个选择器使用相同的样式规则。组合器将多个选择器结合，构造更精细的选择方式。

选择器列表
如果多个选择器需要使用同一组样式，可以使用选择器列表。列表选择器是用逗号分隔的选择器列表，逗号前后可以有空格、换行符或者其他空白符。
代码10 选择器列表
```
h1, h2, h3,
h4, h5, h6 {font-family: helvetica;
}
```
这个例子表示 <h1> - <h6> 标题元素都使用 helvetica 字体族。效果和分别使用6个元素选择器是一样的。

使用选择器列表可以简化编码，但有一点需要注意：如果列表中的某个选择器无效，整个规则都会被忽略。例如
代码11 无效的选择器列表
```
h1,
h2:invalid-pseudo,
h3 {font-family: sans-serif;
}
```
由于 h2:invalid-pseudo 无效， h1 和 h3 也不会采用样式块。

组合器

组合器将多个选择器结合，构造更精细的选择方式。

代码12 组合器

/* 下级组合器。选择器1匹配的元素中，若其下级元素匹配选择器2，选择下级元素。 */
选择器1 选择器2 { 样式声明 }     
/* 直接下级组合器。选择器1匹配的元素中，若其直接下级元素匹配选择器2，选择下级元素。 */
选择器1 > 选择器2 { 样式声明 }   
/* 同级后续组合器。选择器1匹配的元素中，若同级后续元素匹配选择器2，选择同级元素。 */
选择器1 ~ 选择器2 { 样式声明 }   
/* 邻接同级后续组合器。选择器1匹配的元素中，若紧邻的同级后续元素匹配选择器2，选择同级元素。 */
选择器1 + 选择器2 { 样式声明 }

2.4.3. 伪类和伪元素

伪类和伪元素是选择器的扩展，放在选择器后面，提供了更精细的选择机制。伪类以冒号开头，如 button:hover 。伪元素以双冒号开头，如 p::first-letter 。

表11 常用伪类
伪类	说明
:hover	鼠标悬停时
:active	元素被点击瞬间
:focus	元素获得焦点时
:visited	已访问链接
:checked	选中的表单元素
:disabled	禁用状态
:nth-child(n)	元素的第n个下级元素
:not(选择器列表)	排除指定选择器
:is(选择器列表)	匹配任意一个选择器
:has(选择器列表)

表12 常用伪元素
伪元素	说明
::before	元素内容前
::after	元素内容后
::first-letter	元素内容的首字母
::first-line	元素内容的首行
::selection	用户选中的文本
::placeholder	输入框占位符

伪类和伪元素作为选择器的扩展，必须跟在选择器后面，不能独立使用。多个伪类可以同时使用，依次排列。伪类和伪元素也可以同时使用，伪类在前，伪元素在后。

代码13 伪类在前，伪元素在后。

span:hover:active { ... }
div[data-tooltip]:hover::after { ... }

2.5. 优先级和层叠

学习了选择器之后，我们会遇到一个问题：如果两个选择器命中了同一个元素，要使用哪个规则集呢？答案是选优先级高的。优先级相同时，选层叠顺序靠后的。

每个选择器都有优先级，简单来说，越具体、范围越小的优先级越高。标识选择器比类选择器具体，因此优先级更高。类选择器可以看做是属性选择器的特例，二者优先级相同，都高于元素选择器。

表13 选择器优先级
优先级	选择器
高	标识选择器
	类选择器、属性选择器
低	元素选择器

如果两个选择器优先级相同，将会按照层叠顺序，即样式块的编写顺序，选择靠后的一个。

代码14 优先级相同时，选层叠顺序靠后者

p {color: red;
}/* 层叠顺序靠后者生效 */
p {color: blue;
}

2.6. 盒模型

前文介绍了描述单个元素样式的属性。实际的网页中往往存在多个元素，如何排列这些元素呢？这就涉及到布局。这里我们介绍布局的基础：盒模型。关于布局的内容在下一部分。

CSS把元素放到一个“盒子”里面，通过排列盒子实现布局。每个盒子分为4层，由内而外依次是内容、内边距、边框、外边距。内容的宽度和高度由 width 和 height 确定。内边距是内容到边框之间的距离，由 padding 确定。边框是在内容周围的修饰性线条，线条宽度由 border-width 确定。外边距是边框到其他元素（边框）的距离，由 margin 确定。元素实际占据的空间包括内容、内边距和边框，不包括外边距。外边距是控制元素（边框）之间距离的。

图1 盒模型

内容的宽度和高度可以通过 width 和 height 设置。值可以是带距离单位的值、百分比（相对于上级元素）或 auto 。 auto 是默认值，表示让浏览器自行元素宽度。使用 min-width 和 max-width 可以设置元素的最小和最大宽度，这两个属性的优先级高于 width 。类似的，高度属性有 height 、 min-height 和 max-height 。

从内容到边框（内层）的距离叫内边距，使用 padding 设置，也可以在每个方向上单独设置内边距。内边距可以设置为负数。

代码15 内边距

padding: 12px;                 /* 内边距 */
padding: 8px 16px;             /* 顶底 | 左右 */
padding: 8px 16px 12px;        /* 顶 | 左右 | 底 */
padding: 8px 16px 12px -24px;  /* 顶 | 右 | 底 | 左 （顺时针）*/
padding-top: 12px;             /* 顶部内边距 */
padding-right: 12px;           /* 右侧内边距 */
padding-bottom: 12px;          /* 底部内边距 */
padding-left: 12px;            /* 左侧内边距 */

边框是在内容周围的修饰性线条，线条有粗细，边框也会占用空间。同样的，可以为四个方向的边框单独设置样式。

代码16 边框样式

border-{top,right,bottom,left}-{width,style,color}

轮廓是在边框外侧紧贴边框的线条。轮廓不占用空间，意思是不会因为绘制轮廓而将其他元素“推开”，因此盒模型不包含轮廓。轮廓在边框外侧，这里通常是属于外边距的空间。如果外边距是0而轮廓宽度大于0，轮廓将“侵入”到其他元素的边框、内边距或内容所占用的空间。

外边距是边框（外侧）到其他元素边框（外侧）的距离。和内边距一样，外边距也可以设置成负值。

代码17 外边距

margin: 12px;                 /* 外边距 */
margin: 8px 16px;             /* 顶底 | 左右 */
margin: 8px 16px 12px;        /* 顶 | 左右 | 底 */
margin: 8px 16px 12px -24px;  /* 顶 | 右 | 底 | 左 */
margin-top: 12px;             /* 顶部外边距 */
margin-right: 12px;           /* 右侧外边距 */
margin-bottom: 12px;          /* 底部外边距 */
margin-left: 12px;            /* 左侧外边距 */

由于外边距和两个元素有关，必然产生一个问题：如果两个相邻元素都设置了 margin ，那么它们边框外侧之间的距离是多少呢？这个计算规则叫做外边距折叠，方法如下：

两个正外边距取最大值。
两个负外边距取最小值（绝对值最大）。
一正一负外边距取和。

2.6.1. box-sizing

box-sizing属性决定了盒模型长度和宽度的计算方式，它有两个可选值：content-box（默认值）和border-box。使用content-box时，width和height属性是元素内容盒子的宽度和高度：

width = 内容宽度
height = 内容高度

使用border-box时，width和height时边框盒子（外侧）的宽度和高度：

width = 内容宽度 + 内边距宽度 + 边框宽度
height = 内容高度 + 内边距高度 + 边框高度

2.6.2. 轮廓和阴影

轮廓（outline）绘制在边框外侧，但是轮廓不占据独立的空间，而是在外边距盒子中绘制。如果外边距盒子太小，轮廓会侵入其他元素的盒子空间，遮挡其他元素。盒子阴影（box-shadow）和文字阴影（text-shadow）与轮廓类似，同样是不占据独立空间的视觉效果。盒子阴影可能覆盖其他元素，文字阴影不会。

3. CSS布局

3.1. 正常流布局

布局决定了元素的排列方式。如果让浏览器按照默认方式排列，叫做正常流（normal flow）布局。正常布局的排列方法是：各行从上到下，行内从左到右。

什么时候会开始新的一行呢？块元素产生新行。元素分为块元素和行内元素两类。块元素独占一行，行内元素则是在行中，在前面元素的右边排列。如果一行排满了，行内元素继续从下一行开始排列。

块元素是 display 属性为 block 的元素，独占一行，可以设置高度 height 、宽度 width （默认值 100% ）和内边距、外边距。行内元素是 display 值为 inline 的元素，不产生换行，高度和宽度由元素内容决定，不能设置垂直方向的内边距和外边距。

如果希望为行内元素设置高度、宽度或垂直内外边距要怎么做呢？可以使用行内块元素。行内块元素的 display 是 inline-block ，是一种特殊的行内元素，它像其他行内元素一样，在行内排列，同时像块元素一样可以设置高度、宽度和边距。

表14 块元素、行内元素、行内块元素对比
	块元素	行内元素	行内块元素
`display`	`block`	`inline`	`inline-block`
默认宽度	占满上级容器宽度	由内容决定	由内容决定
默认高度	由内容决定	由内容决定	由内容决定
换行	独占一行	不换行	不换行
设置宽高	有效	无效	有效
内边距	全部有效	左右有效	全部有效
外边距	全部有效	左右有效	全部有效

常用的HTML标签和默认显示类型如下：

表15 常用HTML标签和默认显示类型
显示类型	元素	元素简介
块元素	`<div>`	文档分区
	`<footer>`	页脚
	`<form>`	表单
	`<h1>-<h6>`	1-6级标题
	`<header>`	页眉
	`<li>`	列表项
	`<nav>`	导航链接
	`<ol>`	有序列表
	`<p>`	段落
	`<table>`	表格
	`<ul>`	无序列表
行内元素	`<a>`	超链接
	`<span>`	行内节
	`<sub>`	下标
	`<sup>`	上标
行内块元素	`<button>`	按钮
	`<img>`	图像
	`<input>`	输入框
	`<select>`	下拉菜单
	`<textarea>`	多行文本输入

3.2. 弹性盒子布局

弹性盒子（Flexbox）是一种灵活的线性容器。如果希望元素在水平或垂直方向依次排列，并且能够根据容器尺寸自动调整元素位置和大小，可以使用弹性盒子布局。

弹性盒子布局包括两部分：flex容器和flex项。如果一个元素的 display 属性是 flex ，它就成为flex容器，它的下级元素成为flex项。flex容器是块元素，独占一行。如果不希望flex容器产生换行，可以将容器的 display 属性设置为 inline-flex 。

弹性盒子是一种线性容器，这条线叫做主轴。沿着主轴方向，flex项在flex容器中依次排列。主轴方向由flex容器的 flex-direction 属性决定，值可以是

表16 flex-direction
flex-direction	排列方向
row（默认值）	左起水平向右
row-reverse	右起水平向左
column	上起垂直向下
column-reverse	下起垂直向上

flex项的宽度（高度）由flex项的属性 flex-basis （优先级高）或 width （ height ）决定。flex项未必总能恰好排满主轴，通常需要处理“排不满”和“排不下”两种情况。

“排不满”有两种处理方法：一是拉伸元素覆盖剩余空间，二是用空白填充剩余空间。

表17 “排不满”的处理方法
处理方法	元素	属性值
拉伸元素	flex项	`flex-grow: 1;`
填充空白-在终点填充	flex容器	`justify-content: start;`
填充空白-在起点填充	flex容器	`justify-content: end;`
填充空白-在两端填充	flex容器	`justify-content: center;`
填充空白-在元素周围填充	flex容器	`justify-content: space-betwwen;`
填充空白-在元素周围填充	flex容器	`justify-content: space-around;`
填充空白-在元素周围填充	flex容器	`justify-content: space-evenly;`

如果主轴没有排满，剩余空间按比例分配给各个flex项，权重就是元素的 flex-grow 值。 flex-grow 默认值是0，表示不会为元素分配剩余空间。

如果采用填充空白的方法，需要设置flex容器的 justify-content 属性，取值如下：

表18 justify-content
justify-content	flex项排列方式
start（默认值）	第一个在行首，紧邻排列。
end	最后一个在行尾，紧邻排列。
center	居中紧邻排列。
space-between	第一个行首，最后一个行尾，均匀排列。
space-around	均匀排列，元素之间距离相同，均是容器与（首尾）元素距离的2倍。
space-evenly	均匀排列，元素之间、容器与（首尾）元素的距离相同。

“排不下”有五种处理方法：一是收缩元素适配主轴长度，二是换行，三是溢出，四是截断，五是使用滚动条。

表19 “排不下”的处理方法
处理方法	元素	属性值
收缩元素	flex项	`flex-shrink: 1;`
换行	flex容器	`flex-wrap: wrap;`
溢出	flex容器	`flex-wrap: nowrap;`
截断	flex容器	`flex-wrap: nowrap; overflow: hidden;`
滚动条	flex容器	`flex-wrap: nowrap; overflow: scroll;`

flex-shrink 和 flex-grow 相对的属性，当主轴空间不足时，元素以 flex-shrink 为比例收缩。区别在于， flex-shrink 默认值是1，即在默认情况下，均匀收缩flex项以适配主轴长度。 flex-wrap 属性用于控制换行方式，如果主轴排满了，后续元素会在新的一行（列）上继续排列。新行（列）默认排列在原行（列）的下方（右侧），这个方向叫做交叉轴方向。交叉轴是与主轴垂直且向下或向右的线。

表20 flex-wrap
值	说明
wrap	换行（列）。新行（列）沿交叉轴方向（下方/右侧）排列。
nowrap（默认值）	不换行（列）。
wrap-reverse	换行（列）。新行（列）沿交叉轴方向反向（上方/左侧）排列。

在不换行（列）的情况下，通过控制flex容器的 overflow 属性，可以实现溢出、截断或滚动条效果。

表21 overflow值
visible（默认值）	溢出。显示超出容器尺寸的内容，侵入其他元素的盒模型空间。
hidden	截断。不显示超出容器尺寸的内容。
scroll	滚动条。提供滚动条，拖动时显示超出容器尺寸的内容。

讲完了主轴上元素的排列方式，现在介绍元素在交叉轴方向的对齐方式，它由flex容器的 align-items 属性决定。

表22 align-items属性
align-items	说明
start（默认值）	按交叉轴起点对齐
end	按交叉轴终点对齐
center	按交叉轴居中对齐
baseline	按文字基线对齐
stretch	拉伸元素，填充容器高度

如果某个flex项希望拥有独立的对齐方式，可以使用flex项的 align-self 属性，它会在flex项中覆盖flex容器的 align-items 属性。两个属性取值是一样的。

flex项默认按照元素在HTML文档中的顺序排列。调整 order 属性可以修改flex项顺序，越大越靠后，默认值是0。

为了简化编码，CSS提供了关于flex的缩写。

表23 flex缩写
元素	缩写	值	含义
flex项	`flex: 2;`	单值，无单位数字	`flex-grow`
	`flex: 30px;`	单值，距离	`flex-basis`
	`flex: 1 30px;`	双值	`flex-grow flex-shrink`
	`flex: 2 2 10%;`	三值	`flex-grow flex-shrink flex-basis`
flex容器	`flex-flow: row;`	单值	`flex-direction`
	`flex-flow: wrap;`	单值	`flex-wrap`
	`flex-flow: column wrap;`	双值	`flex-direction flex-wrap`

3.3. 网格布局

网格布局将元素占用的空间划分为二维格子，下级元素放置在格子所在的位置上。划分格子的元素叫做网格容器，其 display 属性是 grid （块元素）或 inline-grid （行内块元素）。网格容器的下级元素叫做网格项。容器划分成二维格子后，垂直方向的一列格子叫做列轨道，水平方向的一行格子叫行轨道。列轨道和行轨道分别称为列和行。

网格容器的 grid-template-columns 属性决定了划分的列数和每个列的宽度。下面的代码将容器划分为2列，宽度分别是100px和20px。

grid-template-columns: 100px 20px;

如果希望某一列能够自动填充容器的剩余宽度，可以使用 fr 单位。 fr 是fraction的意思，表示比例。下面的代码将容器划分为3列，第一列占100px，另外两列分别占据剩余宽度的1/3和2/3。

grid-template-columns: 100px 1fr 2fr;

如果希望对列宽做更细致的控制，可以使用 minmax() 函数，它有两个参数，分别是列宽的最小值和最大值。例如 grid-template-columns: minmax(100px, 1fr) 1fr; 表示第一列的宽度自小是100px，最大是1fr。

代码18 minmax函数

minmax(100px, 1fr)
minmax(100px, 20%)
minmax(min-content, 100px) /* min-content是不换行、不溢出时网格项需要的最小空间。 */
minmax(100px, max-content) /* max-content是不换行、不截断时网格项自然占据的空间。 */
minmax(auto, ...)          /* 等价于 minmax(min-content, ...) */
minmax(..., auto)          /* 等价于 minmax(..., max-content) */

如果每列的宽度设置相同，可以使用repeat函数简化编码。

代码19 repeat函数

grid-template-columns: repeat(4, 1fr);                  /* 划分4列，每列宽1fr。 */
grid-template-columns: repeat(4, minmax(20px, 1fr));    /* 划分4列，列宽不小于20px，不大于1fr。 */

网格项按列依次放置，超出的从下一行第一列继续，因此常常可以省略行轨道属性。行高有特殊要求的，可以使用 grid-template-rows 属性，与 grid-template-columns 类似。

行和列之间的间隔由 column-gap 和 row-gap 决定。

代码20 column-gap和row-gap

column-gap: 3px;  /* 网格布局的column-gap默认为0。 */
row-gap: 3px;     /* 网格布局的row-gap默认为0。 */

默认情况下，网格项从第一列开始依次放置，每个网格项占一个格子。如果修改网格项的 grid-column-start 和 grid-column-end 属性，可以调整网格项的放置位置，或让网格项横跨多个列轨道。

代码21 网格项的grid-column-start/grid-column-end属性可以调整放置位置或横跨多列

grid-column-start: 2;      /* 从第1行第2列开始放置网格项。 */
grid-column-start: -1;     /* 从第1行倒数第1列开始放置网格项。 */
grid-column-start: span 3; /* 从第1行第1列开始放置网格项，横跨3个行轨道。 */
grid-column-end: 2;        /* 将网格项结束位置放在第1行第2列。 */
grid-column-end: -1;       /* 将网格项结束位置放在第1行倒数第1列。 */
grid-column-end: span 3;   /* 网格项横跨3个行轨道。 */

如果同时设置了网格项的 grid-column-start 和 grid-column-end 属性，网格项会自动跨越列轨道，不需要使用 span 关键字。类似的，设置网格项的 grid-row-start 和 grid-row-end 属性可以让网格项跨越行轨道。

为了简化编码，CSS提供了简写：

代码22 网格布局属性简写

grid-column: 1 / 3; /* grid-column-start: 1; grid-column-end: 3; */
grid-row: 1 / 3;    /* grid-row-start: 1; grid-row-end: 3; */
gap: 10px 20px;     /* row-gap: 10px; column-gap: 20px; */
gap: 10px;          /* row-gap: 10px; column-gap: 10px; */

3.4. 分栏布局

分栏布局将区域划分为若干垂直的栏，子元素放置到栏中，填满一个后再填充下一个。如果设置了 column-count 栏数量或 column-width 栏宽度，元素就成为分栏容器。需要注意， column-width 实际上是最小栏宽度。浏览器使用这个值计算栏的数量，如果还有额外的空间，浏览器会增加栏的实际宽度。

如果内容不能填满所有栏，可以使用 column-fill 属性，将内容优先填满靠左侧的栏，或者平均分配到每个栏中。

代码23 column-fill属性

column-fill: auto;      /* 内容优先填充靠左侧的栏。 */
column-fill: balance;   /* 内容平均分配到每个栏中。 */

各栏之间的距离通过 column-gap 属性控制。

代码24 column-gap属性

column-gap: 8px;
column-gap: 10%;

栏与栏之间存在一条界线，和边框、轮廓一样，它也有3个样式属性和属性简写：

代码25 column-rule-*

column-rule-color: red;      /* 界线色彩。 */
column-rule-style: dotted;   /* 界线风格。 */
column-rule-width: 12px;     /* 界线宽度。 */
column-rule: solid 6px blue; /* 属性简写。 */

如果希望分栏容器中的某个子元素跨越所有的栏，可以将子元素的 column-span 属性设置为 all 。

CSS为分栏属性提供了简写：

代码26 columns简写

columns: 20em;       /* column-width: 20em; */
columns: 2;          /* column-count: 2; */
columns: 2 auto;     /* column-count: 2; column-width: auto; */
columns: auto 12em;  /* column-count: auto; column-width: 12em; */

3.5. 手动布局

CSS支持单独设置某个元素的布局，最主要的属性是 position ，它有以下几个值：

static静态位置（默认值）。元素采用正常流布局，此时元素的位置偏移属性（ top 、 right 、 bottom 、 left 和 z-index ）无效。
relative相对位置。首先按照正常流布局排列元素，然后根据位置偏移属性移动元素，其他元素的位置不变。移动后元素可能覆盖其他内容，原来的位置填充背景色。
absolute绝对位置。元素从正常文档流中移除。根据距离元素最近的非静态位置上级元素，和元素自身的位置偏移属性计算位置。绝对定位元素不会合并外边距。
fixed视口固定位置。元素从正常文档流中移除。根据屏幕视口位置和位置偏移属性决定元素位置。在屏幕滚动时，元素的位置也不会改变。视口（viewport）是当前可见的网页区域。
sticky粘性位置。粘性位置可以看做相对位置和视口固定位置的结合。一开始元素使用相对定位。在屏幕滚动时，如果达到阈值，元素变为视口固定定位。反之，如果屏幕反向滚动偏离阈值，元素再次变为相对定位。粘性位置通常用于吸顶效果。使用粘性位置时有两点需要注意：必须至少设置 top 、 right 、 bottom 或 left 属性之一；上级元素必须可以滚动 overflow: auto | scroll | hidden; 。

除 position 外，属性 float 也可以改变元素的位置。 float 让元素浮动到上级元素盒子的靠左或靠右一侧。浮动元素会被移出文档流，然后向左（右）平移，直到接触盒子边界，或接触另一个浮动元素。其他内容环绕浮动元素排列，填充浮动元素右（左）侧和下方的空间。

代码27 手动布局属性

position: static;   /* 正常流布局。 */
position: relative; /* 相对（正常布局）位置。 */
position: absolute; /* 绝对位置。 */
position: fixed;    /* 视口固定位置。 */
position: sticky;   /* 粘性位置。 */
top: 10px;
right: 20px;
bottom: 10px;
left: 10px;
float: left;

4. CSS进阶

4.1. 排列方向

前文在描述水平位置时，使用了大量的“左”、“右”等词汇。严格来说这些是不精确的。对于像阿拉伯语这类右起书写文字，网页元素的排列也要从右向左。为了支持不同书写方向的语言，HTML提供了dir属性，它有三个值：

ltr。左起。正常流方向从左到右。用于汉语、英语等左起书写语言。
rtl。右起。正常流方向从右到左。用于阿拉伯语等右起书写语言。
auto。由用户代理决定。

dir是全局属性，每个HTML元素都支持，默认值是ltr。对应的，CSS提供了direction属性，含义和值与dir一致。为了保持语义清晰，最好使用HTML属性dir代替CSS属性direction。

汉语左起书写，流的起始位置在左，结束位置在右。前文中的“左”、“右”指的实际上“起始”和“结束”。后文我们会使用这两个词汇，后文中出现的“左”、“右”将用来表示实际方位。

和direction相似的属性还有writing-mode、text-orientation和text-combine-upright。writing-mode控制文本和块元素排列方向。

表24 writing-mode
值	文本方向	排列方向	典型应用
horizontal-tb（默认）	水平排列（方向由direction决定）	上 → 下	西方语言布局
vertical-rl	垂直排列（右→左书写）	右 → 左	中文/日文竖排
vertical-lr	垂直排列（左→右书写）	左 → 右	蒙古文/特殊布局

当writing-mode设置为垂直方向时（值不是horizontal-tb），text-orientation可以控制行中字符的方向。

表25 text-orientation属性值
	拉丁字符	CJK字符
mixed	旋转90°	直立
upright	直立	直立
sideways	旋转90°	旋转90°

如果在垂直排版中，有些拉丁字母或数字需要水平排列，可以使用text-combine-upright。

表26 text-combine-upright
none（默认）	所有字符垂直排列。
all	将全部字符水平排列在一个竖排字符空间中（最多约4-5个字符）。
digits N	将连续N个数字水平排列在一个竖排字符空间中。

4.2. 继承和优先级

4.2.1. 继承

一些样式属性可以自动从上级元素传递给下级元素，这个机制叫做继承。常用的支持继承的属性有：

表27 支持继承的属性（部分）
	属性名	说明
文字样式	font-family	字体族
	font-size	字体大小
	font-weight	字体粗细
	font-style	字体样式
	font-variant	字体变体
	font	简写属性
	color	文本颜色
	text-align	文本对齐
	text-indent	首行缩进
	line-height	行高
	letter-spacing	字母间距
	word-spacing	单词间距
	text-transform	文本转换（大小写等）
	direction	文本方向
列表样式	list-style-type	列表项标记
	list-style-image	列表项图像
	list-style-position	列表项位置
	list-style	简写属性
其他	visibility	元素可见性
	cursor	鼠标样式
	quotes	引号样式
	white-space	空白处理方式
	orphans	控制段落末尾行数
	widows	控制段落开头行数

关于元素位置、盒模型的属性通常不支持继承。

表28 不支持继承的属性（部分）
属性名	说明
width	宽度
height	高度
margin	外边距
padding	内边距
border	边框
background	背景
display	显示方式
position	定位方式
float	浮动
clear	清除浮动
box-sizing	盒模型计算

开发者可以手动控制继承，方法是将属性设置为以下之一：

表29 控制继承
inerit	强制继承上级元素样式。
initial	将样式重置为初始值。
unset	对可继承属性，继承上级样式；对不可继承属性，重置为初始值。
revert	重置为浏览器默认值。

这里的初始值可以理解为比浏览器默认值更底层的默认值。

4.2.2. 优先级

每个选择器都有一个优先级，当一个元素匹配多个选择器时，优先级高的选择器生效。CSS优先级是一个四元数(a,b,c,d)，四个数的权重由高到低。为了简便，下面将四元组(a,b,c,d)写为数值a*1000+b*100+c*10+d。但请注意，权重不能直接使用简写数值比较。例如(0,1,0,0)优先级高于(0,0,11,0)。

元素style属性定义的样式叫做内联（inline）样式，内联样式的权重最高，是(1,0,0,0)，简写为1000。每个标识选择器的权重是100。每个类、属性和伪类选择的权重是10。每个元素、伪元素选择器的权重是1。通用选择器和继承样式的权重是0。将选择器中所有的权重加总，就得到选择器的优先级。

表30 选择器权重
内联样式	1000
标识选择器	100
类、属性、伪类选择器	10
元素、伪元素选择器	1
通用选择器、继承	0

表31 选择器权重示例
h1#title {}	0101
.container .highlight {}	0020
p {}	0001
* {}	0

简单来说，优先级原则是越具体越优先。如果两个选择器优先级相同，后面的选择器会“覆盖”前面的。

考虑到可能存在难以准确评估优先级情况，为了保证样式匹配精准，CSS提供了!important关键字，将最终决定权交到开发者手中。!important拥有最高优先级。

代码28 !important

p {color: red !important;
}

但是，如果两个!important声明冲突了，怎么办呢？!important声明的优先规则如下：

内联!important声明优先级最高。
!important声明优先于任何非!important声明，包括非!important内联规则。
多个!important声明冲突时，按正常权重规则决定。
权重相同时，排列最后的规则生效。

4.3. 变形、滤镜和动画

4.3.1. 变形

transform属性可以旋转、缩放、倾斜或平移元素，修改元素的形状。transform不会改变文档流布局或盒子空间，只改变元素的视觉效果。

代码29 transform

/* 旋转 */
transform: rotate(0.5turn);                     /* 顺时针旋转半周。 */
transform: rotate(45deg);                       /* 顺时针旋转45度。 */
transform: rotate3d(1, 2, 3, 10deg);            /* 绕自定义轴(0,0,0)->(1,2,3)旋转10度。 */
transform: rotateX(10deg);                      /* 绕X轴旋转10度。 */
transform: rotateY(10deg);                      /* 绕Y轴旋转10度。 */
transform: rotateZ(10deg);                      /* 绕Z轴旋转10度。 *//* 缩放 */
transform: scale(2, 0.5);                       /* X轴放大到2倍，Y轴缩小到0.5倍。 */
transform: scale3d(2.5, 1.2, 0.3);              /* X、Y、Z轴。 */
transform: scaleX(2);                           /* X轴放大到2倍。 */
transform: scaleY(0.5);                         /* Y轴缩小到0.5倍。 */
transform: scaleZ(0.3);                         /* X轴缩小到0.5倍。 *//* 平移 */
transform: translate(12px, 50%);                /* 沿X轴向排列方向平移12px，沿Y轴向下平移元素高度的50%。 */
transform: translate3d(12px, 50%, 3em);         /* X、Y、Z轴。 */
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);/* 倾斜 */
transform: skew(30deg, 20deg);                  /* 沿X轴偏斜30度、沿Y轴偏斜20度。 */
transform: skewX(30deg);
transform: skewY(1.0rad);/* 自定义变换 */
transform: matrix(1, 2, 3, 4, 5, 6);            /* 2D矩阵变换。 */
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);  /* 3D矩阵变换。 */
transform: perspective(17px);/* 组合多个变形 */
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

4.3.2. 滤镜

filter属性可以为元素设置滤镜视觉效果，比如高斯模糊、增加饱和度等等。

代码30 filter

filter: blur(4px);                             /* 高斯模糊。 */
filter: brightness(50%);                       /* 亮度。 */
filter: contrast(1.75);                        /* 对比度。 */
filter: drop-shadow(30px 10px 4px #4444dd);    /* 投影。 */
filter: grayscale(60%);                        /* 灰度。 */
filter: hue-rotate(90deg);                     /* 色相旋转。 */
filter: invert(0.3);                           /* 色彩反转。 */
filter: opacity(50%);                          /* 透明。 */
filter: saturate(4);                           /* 调整饱和度。 */
filter: sepia(0.2);                            /* 增加棕褐色调。 */

如果希望实现类似毛玻璃的效果，可以使用backdrop-filter属性。backdrop-filter为元素（Z轴）后面的区域添加滤镜效果，支持所有的filter函数。

4.3.3. 动画

过渡

当属性更改时，元素样式立即随之变化。过渡可以让样式的改变在一段时间内平滑进行。过渡主要通过以下四个属性进行控制：

代码31 过渡属性

transition-property: width, height;    /* 过渡的属性。 */
transition-duration: 2s;               /* 过渡持续时间。 */
transition-timing-function: ease-in;   /* 过渡速度曲线。 */
transition-delay: 0.5s;                /* 过渡前的延迟时间。 */

这些属性有一个简写形式。

代码32 过渡属性简写

transition: [property] [duration] [timing-function] [delay];

代码33 过渡速度曲线

/* 线性过渡。 */
linear(0, 0.25, 1)                 /* 前50%时间过渡到进度0.25，后50%时间在过渡到100%。 */
linear(0, 0.25 75%, 1)             /* 前75%时间过渡到进度0.25，后25%时间在过渡到100%。 *//* 三次贝塞尔过渡。 */
cubic-bezier(0.4, 0.0, 1.0, 1.0)   /* 三次贝塞尔曲线P1和P2点坐标。 */
ease                               /* 缓慢开始，加速然后减速至结束。 *//* 等效于 cubic-bezier(0.25, 0.1, 0.25, 1.0)。 */
ease-in                            /* 缓慢开始，逐渐加速至结束 *//* 等效于 cubic-bezier(0.42, 0.0, 1.0, 1.0)。 */
ease-out                           /* 突然开始，后减速至结束。 *//* 等效于 cubic-bezier(0.0, 0.0, 0.58, 1.0)。 */
ease-in-out                        /* 缓慢开始，先加速，后减速至结束。 *//* 等效于 cubic-bezier(0.42, 0.0, 0.58, 1.0) *//* 阶跃过渡。 */
steps(4)                           /* 分4阶段。 */
steps(2, jump-start)               /* 分2阶段。第一步在插值开始时发生。 */
steps(4, jump-end)                 /* 分4阶段。最后一步在插值结束时发生。 */
steps(5, jump-none)                /* 分5阶段。两端无跳跃，在0%和100%处保持1/5时长。 */
steps(3, jump-both)                /* 分3阶段。在0%和100%处跳跃，相当于增加一步。 */
step-start                         /* 等效于 steps(1, jump-start) */
step-end                           /* 等效于 steps(1, jump-end) */

关于过渡速度曲线细节，请参考<easing-function> - CSS：层叠样式表 | MDN。

使用过渡时有两点需要注意：

并非全部属性都支持过渡，通常只有数值属性（如宽度、高度、颜色、透明度等）支持。
过渡需要触发器，如:hover、:active等。

关键帧动画

关键帧是动画在某个阶段的切片。通过定义关键帧及其之间的过渡效果，可以实现更复杂的动画。

关键帧使用@keyframes规则定义，语法如下：

代码34 关键帧动画

@keyframes animation-name {from {transform: rotate(0deg) translateX(0);  }to {transform: rotate(360deg) translateX(200px);}
}/* 或者使用百分比 */
@keyframes animation-name {0% {background: #ff0000;}50% {background: #00ff00;}100% {background: #0000ff;}
}

定义动画之后，通过元素的animation属性，可以将动画绑定到元素上。

.element {  animation-name: animation-name;        /* 动画名字，与@keyframes定义一致。 */animation-duration: 2s;                /* 持续时间2秒。 */animation-timing-function: ease-out;   /* 速度曲线。 */animation-delay: 0.5s;                 /* 动画前延迟。 */animation-iteration-count: 3;          /* 播放次数。 */animation-direction: alternate;        /* 播放方向。 */animation-fill-mode: forwards;         /* 动画结束后样式保留方式。 */
}

代码35 animation简写

animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];

4.4. 函数和变量

4.4.1. 函数

函数是动态生成值的工具，可以用来计算尺寸大小、色彩、渐变等等。

代码36 色彩函数

color: rgb(255, 0, 0);                          /* 红，绿，蓝 */
color: rgba(0, 255, 255, 0.5);                  /* 红，绿，蓝，色彩通量 */ color: hsl(120, 100%, 50%);                     /* 色相，饱和度，亮度 */
color: hsla(120, 100%, 50%, 0.3);               /* 色相，饱和度，亮度，色彩通量 */color: hwb(0 0% 0%);                            /* 色相, 白度, 黑度 */
color: hwb(120 20% 10% / 0.8);                  /* 色相, 白度, 黑度，色彩通量 */color: lab(53% 80 67);                          /* 亮度, 红绿轴, 黄蓝轴 */
color: lab(53% 80 67 / 0.5);                    /* 亮度, 红绿轴, 黄蓝轴，色彩通量 */color: lch(53% 104 40);                         /* 亮度, 色度, 色相 */
color: lch(53% 104 40 / 0.5);                   /* 亮度, 色度, 色相，色彩通量 */color: oklab(59% 0.1 0.1);                      /* 亮度, 红绿轴, 黄蓝轴 */
color: oklch(60% 0.15 50);                      /* 亮度, 色度, 色相 */
color: oklch(60% 0.15 50 / 0.5);                /* 亮度, 色度, 色相，色彩通量 */color: color-mix(in srgb, red 30%, blue 70%);   /* 色彩插值 */

代码37 尺寸函数

width: calc(100% - 50px);           /* 宽度为上级容器宽度减去50px。 */
width: min(100%, 500px);            /* 不超过500px。 */
width: max(10vw, 500px, 20em);      /* 10vw、500px和20em的最大值。 */
font-size: clamp(1rem, 2vw, 2rem);  /* 最小、首选、最大。 */

代码38 渐变函数

/* 渐变轴为 45 度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);/* 色标：从下到上，从蓝色开始渐变，到高度 40% 位置是绿色渐变开始，最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);/* 颜色提示：从左到右的渐变，由红色开始，沿着渐变长度到 10% 的位置，然后在剩余的 90% 长度中变成蓝色 */
linear-gradient(.25turn, red, 10%, blue);/* 多位置色标：45% 倾斜的渐变，左下半部分为红色，右下半部分为蓝色，中间有一条硬线，在这里渐变由红色转变为蓝色 */
linear-gradient(45deg, red 0 50%, blue 50% 100%);/* 在容器中心的渐变，从红色开始，变成蓝色，最后变成绿色 */
radial-gradient(circle at center, red 0, blue, green 100%)/* 一个旋转 45 度的锥形渐变，从蓝色渐变到红色 */
conic-gradient(from 45deg, blue, red);/* 一个蓝紫色框：从蓝色渐变到红色，但只有右下象限可见，因为锥形渐变的中心位于左上角 */
conic-gradient(from 90deg at 0 0, blue, red);/* 色轮 */
background: conic-gradient(hsl(360, 100%, 50%),hsl(315, 100%, 50%),hsl(270, 100%, 50%),hsl(225, 100%, 50%),hsl(180, 100%, 50%),hsl(135, 100%, 50%),hsl(90, 100%, 50%),hsl(45, 100%, 50%),hsl(0, 100%, 50%)
);

代码39 变形与动画函数

rotate(0.5turn);                /*  顺时针旋转半周。                                       */
rotate(45deg);                  /*  顺时针旋转45度。                                       */
rotate3d(1, 2, 3, 10deg);       /*  绕自定义轴(0,0,0)->(1,2,3)旋转10度。                   */
rotateX(10deg);                 /*  绕X轴旋转10度。                                        */
rotateY(10deg);                 /*  绕Y轴旋转10度。                                        */
rotateZ(10deg);                 /*  绕Z轴旋转10度。                                        */
scale(2, 0.5);                  /*  X轴放大到2倍，Y轴缩小到0.5倍。                         */
scale3d(2.5, 1.2, 0.3);         /*  X、Y、Z轴。                                            */
scaleX(2);                      /*  X轴放大到2倍。                                         */
scaleY(0.5);                    /*  Y轴缩小到0.5倍。                                       */
scaleZ(0.3);                    /*  X轴缩小到0.5倍。                                       */
translate(12px, 50%);           /*  沿X轴向排列方向平移12px，沿Y轴向下平移元素高度的50%。  */
translate3d(12px, 50%, 3em);    /*  X、Y、Z轴。                                            */
translateX(2em);              
translateY(3in);              
translateZ(2px);              
skew(30deg, 20deg);             /*  沿X轴偏斜30度、沿Y轴偏斜20度。                         */
skewX(30deg);                 
skewY(1.0rad);                
matrix(1, 2, 3, 4, 5, 6);       /*  2D矩阵变换。                                           */
matrix3d(1, 0, ...);            /*  3D矩阵变换。                                           */
perspective(17px);            
cubic-bezier();

代码40 滤镜函数

blur(4px);                             /* 高斯模糊。 */
brightness(50%);                       /* 亮度。 */
contrast(1.75);                        /* 对比度。 */
drop-shadow(30px 10px 4px #4444dd);    /* 投影。 */
grayscale(60%);                        /* 灰度。 */
hue-rotate(90deg);                     /* 色相旋转。 */
invert(0.3);                           /* 色彩反转。 */
opacity(50%);                          /* 透明。 */
saturate(4);                           /* 调整饱和度。 */
sepia(0.2);                            /* 增加棕褐色调。 */

代码41 其他函数

var(--main-color);  /* 引用变量。 */
url("image.jpg");   /* 引用外部资源。 */  
attr(data-tooltip); /* 引用HTML属性值。 */

4.4.2. 变量

CSS支持自定义属性，叫做CSS变量。变量以--开头，通常定义在全局作用域的:root选择器中。

代码42 定义CSS变量

:root {--primary-color: #3498db;--spacing: 16px;--font-size: 1.2rem;
}

定义之后，可以在样式中通过var函数引用变量。

代码43 使用CSS变量

.button {background-color: var(--primary-color);padding: var(--spacing);font-size: var(--font-size);
}

4.5. 可变字体

可变字体（Variable Fonts）是字体族的扩展，可变字体将多种字体变体（不同字重、字宽、倾斜度等）整合到单个字体文件中。通过调整参数，动态生成各种样式。

可变字体通过设计轴（axis）控制字体外观。设计轴分为注册轴和自定义轴。注册轴是每种可变字体都支持的、最常用的5个设计轴。自定义轴则有字体设计师决定。

表32 注册轴
轴标签	描述	取值范围	对应CSS属性
wght	字重	100-900	font-weight
wdth	字宽	75%-125%	font-stretch
ital	倾斜开关	0（常规）/1（斜体）	font-style: italic
slnt	倾斜角度	-90-0	font-style: oblique
opsz	光学尺寸	6-144pt	font-optical-sizing

自定义轴的名字由4个大写字母组成。取值范围通常为 0-1000（默认值0）。一些开关型自定义轴取值为0和1。

GRAD	字重密度	0-1000（密度渐变）
CASL	书法风格	0（常规）-1（手写体）
BLDA	内联装饰细节	0-1000（装饰强度）
WMX2	字重扩展	0-1000（细到粗）
TRMA	末端圆角	0-1000（圆角程度）
SPAC	字符间距	0（紧凑）-1000（宽松）
CNTR	笔画对比度	0（低）-1000（高）
HGHW	字高（高度）	0（标准）-1000（增高）
WDTH	字宽	75%-125%（伸缩比例）
ZGNG	中宫（内部空间）	0（紧凑）-1000（宽松）

要修改设计轴的值，可以使用font-variation-settings属性。

代码44 font-variation-settings

.text {font-variation-settings: "wght" 375,"wdth" 110,"slnt" -8;
}

4.6. 响应式设计

响应式设计是一种网页开发方法论，通过 CSS、HTML 和 JavaScript 等技术，使页面能够根据设备屏幕尺寸、方向或分辨率自动调整布局和内容，提供一致的用户体验。

4.6.1. 视口

视口（viewport）指的是浏览器中网页当前可见的区域。在桌面端，视口宽度等于浏览器窗口宽度；但在移动端，由于屏幕尺寸较小，浏览器可能“放大”页面，显示桌面布局。正确配置视口是响应式设计的第一步。

视口通过HTML标签<meta>设置。下面是一个例子。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

其中width=device-width表示将视口宽度设置为设备宽度，initial-scale=1.0表示初始缩放比例为1。视口相关的属性有：

表33 meta viewport属性
属性	说明	推荐值
width	视口宽度	device-width
initial-scale	初始缩放比例	1.0
minimum-scale	允许的最小缩放比例	1.0
maximum-scale	允许的最大缩放比例	1.0
user-scalable	是否允许用户缩放	no

为了满足响应式设计的需求，CSS提供了以视口为基准的相对长度单位。

表34 视口相对长度单位
单位	说明
vw	视口宽度的1%
vh	视口高度的1%
vmin	视口较小尺寸的1%
vmax	视口较大尺寸的1%

4.6.2. 媒体查询

媒体查询（media queries）可以根据设备特性（屏幕宽度、分辨率、设备方向等）动态调整网页样式。媒体查询是实现响应式设计（Responsive Design）的重要功能。

通过媒体查询，可以针对不同设备加载不同的 CSS 规则，从而实现媒体查询是一个强大的功能，它允许网页根据设备特性应用不同的样式规则，是响应式网页设计的核心。

代码45 媒体查询示例

@media screen and (min-width: 769px) and (max-width: 1024px) {.content { width: 80%; }
}

这个例子表示在屏幕宽度769px-1024px的设备（通常是平板电脑）上应用对应的CSS声明。在更小或更大的屏幕上，不会应用这条CSS规则。例子中的screen是媒体类型。在编写媒体查询时，有时可以省略媒体类型。其他媒体类型包括：

表35 媒体类型
类型	适用场景
all	所有设备（默认值）
screen	电脑、手机、平板等屏幕设备
print	打印设备
speech	屏幕阅读器

例子中的min-width和max-width时媒体特性。CSS支持的媒体特性有：

表36 媒体特性
媒体特性	说明	示例
width	视口宽度（支持前缀 min/max）	(min-width: 768px)
height	视口高度（支持前缀 min/max）	(max-height: 600px)
orientation	设备方向（portrait 竖屏 / landscape 横屏）	(orientation: landscape)
aspect-ratio	视口宽高比	(aspect-ratio: 16/9)
resolution	屏幕分辨率	(min-resolution: 300dpi)
prefers-color-scheme	用户系统主题偏好（light/dark）	(prefers-color-scheme: dark)
prefers-reduced-motion	用户是否要求减少动画	(prefers-reduced-motion: reduce)
hover	设备是否支持悬停操作	(hover: none)
any-hover	是否有至少一种输入方式支持悬停	(any-hover: hover)
pointer	主输入设备的精度	(pointer: coarse)
any-pointer	是否有任意输入设备支持特定精度	(any-pointer: fine)
color-gamut	屏幕色域支持	(color-gamut: p3)
monochrome	设备是否为单色屏幕	(monochrome: 0)
display-mode	Web App 的显示模式（fullscreen/standalone等）	(display-mode: standalone)
inverted-colors	系统是否启用颜色反转	(inverted-colors: inverted)
scripting	检测JavaScript是否可用	(scripting: enabled)
update	屏幕刷新频率（fast/slow/none）	(update: slow)
overflow-block	块轴方向溢出处理方式（none/scroll/optional-paged/paged）	(overflow-block: scroll)
overflow-inline	行内方向溢出处理方式（none/scroll）	(overflow-inline: none)

4.6.3. 容器查询

媒体查询让元素可以感知屏幕尺寸等设备特性。容器查询（container queries）让元素可以感知上级容器尺寸。

表37 容器查询与媒体查询
特性	媒体查询	容器查询
查询基准	视口(viewport)尺寸	上级容器尺寸
作用范围	全局布局	组件级别
适用场景	整体页面响应式	独立组件自适应

使用容器查询时，首先要将一个元素声明为容器，方法是设置container-type和container-name属性。

代码46 container-type和container-name

.component {/* 标准写法 */container-type: inline-size;  /* 容器查询属性。 */container-name: my-container; /* 容器名，可选。 *//* 简写形式 */container: my-container / inline-size;
}

容器查询仅限于容器元素自身和容器元素的直接和间接下级元素，对容器元素的上级和同级元素无效。使用容器名是为了区分不同的容器查询作用域。声明了容器元素之后，可以使用下面的容器查询。

代码47 容器查询

@container my-container (min-width: 500px) {.component__child {font-size: 1.2rem;flex-direction: row;}
}

容器查询属性决定了容器元素和下级元素感知哪些容器特性，包括

代码48 container-type

container-type: normal;        /* 默认值。查询基于容器样式。 */
container-type: size;          /* 查询基于容器的尺寸。 */
container-type: inline-size;   /* 查询基于容器的行内尺寸。 */
container-type: scroll-state;  /* 查询基于容器的滚动状态。 */
container-type: size scroll-state;

5. 附录：速查表

5.1. 常用HTML标签

表38 基础结构
<html>	定义HTML文档根元素
<head>	文档元数据
<title>	标题栏文本
<body>	文档内容
<!DOCTYPE html>	声明文档类型

表39 文本格式标签
<h1>-<h6>	标题级别 1-6
<p>	段落文本
<br>	换行符
<hr>	水平分割线
<strong>	重要文本（加粗）
<em>	强调文本（斜体）

表40 列表标签
<ul>	无序列表
<ol>	有序列表
<li>	列表项
<dl>	描述列表
<dt>	描述术语
<dd>	描述内容

表41 链接与媒体
<a>	超链接
<img>	图像
<audio>	音频
<video>	视频
<source>	多媒体资源定义

表42 表格标签
<table>	定义表格
<tr>	表格行
<th>	表头单元格
<td>	表格数据单元格
<caption>	表格标题
<thead>	表格头部
<tbody>	表格主体
<tfoot>	表格页脚

表43 表单元素
<form>	用户输入表单
<input>	输入控件（空标签）
<textarea>	多行文本输入
<select>	下拉列表
<option>	下拉选项
<label>	表单标签
<button>	可点击按钮

表44 语义化标签
<header>	页面或区块的页眉
<footer>	页面或区块的页脚
<nav>	导航链接
<article>	独立内容区块
<section>	文档章节
<aside>	侧边栏内容
<main>	文档主要内容区
<figure>	独立内容
<figcaption>	图表说明

表45 其他常用标签
<div>	通用容器
<span>	行内容器
<meta>	文档元数据（空标签）
<link>	外部资源链接（空标签）
<style>	内联 CSS 样式
<script>	嵌入或引用 JavaScript

5.2. 盒模型

表46 盒模型
内容	width
	height
内边距	padding
	padding-top
	padding-right
	padding-bottom
	padding-left
边框	border
	border-color
	border-style
	border-width
	border-bottom-color
	border-bottom-style
	border-bottom-width
	border-left-color
	border-left-style
	border-left-width
	border-right-color
	border-right-style
	border-right-width
	border-top-color
	border-top-style
	border-top-width
外边距	margin
	margin-top
	margin-right
	margin-bottom
	margin-left
box-sizing	content-box
	border-box

5.3. 选择器和优先级

表47 选择器
元素选择器	p	按元素选择。
类选择器	.primary	按class选择。
标识选择器	#my-id	按id选择。
属性选择器	a[title]	包含属性时选择。
	a[href="Example Domain"]	属性值相等时选择。
	p[class~="special"]	属性值列表包含目标值时选择。
	div[lang \| ="zh"]	属性值以目标值为前缀时选择。
	li[class^="box-"]	属性值以目标值为前缀时选择。
	li[class$="-box"]	属性值以目标值为后缀时选择。
	li[class*="box"]	属性值以目标值为子串时选择。
通用选择器	*	选择全部。
选择器列表	h1,h2	多个选择器使用相同规则。
组合器	body article	选择下级元素。
	p ~ img	选择后续同级元素。
	div > span	选择直接下级元素。
	img + p	选择后续邻接同级元素。
伪类	:hover
伪元素	::before

表48 常用伪类
伪类	说明
:hover	鼠标悬停时
:active	元素被点击瞬间
:focus	元素获得焦点时
:visited	已访问链接
:checked	选中的表单元素
:disabled	禁用状态
:nth-child(n)	元素的第n个下级元素
:not(选择器列表)	排除指定选择器
:is(选择器列表)	匹配任意一个选择器
:has(选择器列表)

表49 常用伪元素
伪元素	说明
::before	元素内容前
::after	元素内容后
::first-letter	元素内容的首字母
::first-line	元素内容的首行
::selection	用户选中的文本
::placeholder	输入框占位符

表50 优先级
高	内联!important
	!important
	内联样式
	标识选择器
	类选择器、属性选择器
	元素选择器
低	通用选择器、继承

5.4. 布局

布局	属性	说明
弹性盒子	display: flex/inline-flex	定义弹性容器
	flex-direction	主轴方向row/column/row-reverse/column-reverse
	justify-content	主轴对齐方式flex-start/center/space-between等
	flex-grow	项目放大比例
	flex-shrink	项目缩小比例
	flex-wrap	换行方式nowrap/wrap/wrap-reverse
	align-items	交叉轴对齐方式
	flex	简写属性grow shrink basis
	flex-flow	简写direction + wrap
	align-content	多行对齐方式
	order	项目排列顺序
	flex-basis	项目初始大小
网格布局	display: grid/inline-grid	定义网格容器
	grid-template-columns	定义列轨道大小
	grid-template-rows	定义行轨道大小
	row-gap	行间距
	column-gap	列间距
	grid-column-start	项目起始列线
	grid-column-end	项目结束列线
	grid-column	简写start/end
	grid-row	简写行位置start/end
	gap	简写行列间距
	grid-area	项目在网格中的位置
	grid-template-areas	定义网格区域
分栏布局	column-fill	分栏填充方式auto/balance
	column-gap	栏间距
	column-count	分栏数量
	column-width	每栏宽度
	column-rule	栏间分割线简写
	column-rule-color	分割线颜色
	column-rule-style	分割线样式
	column-rule-width	分割线宽度
	columns	简写width + count
	column-span	元素跨栏none/all
手动布局	display	显示类型block/inline/inline-block等
	position	定位方式static/relative/absolute/fixed/sticky
	top	上偏移量
	right	右偏移量
	bottom	下偏移量
	left	左偏移量
	float	浮动方式left/right/none
	z-index	堆叠顺序
	clear	清除浮动
	clip	裁剪绝对定位元素

5.5. 变形

表51 变形
变形	示例	说明
旋转	transform: rotate(0.5turn);	顺时针旋转半周。
	transform: rotate(45deg);	顺时针旋转45度。
	transform: rotate3d(1, 2, 3, 10deg);	绕自定义轴(0,0,0)->(1,2,3)旋转10度。
	transform: rotateX(10deg);	绕X轴旋转10度。
	transform: rotateY(10deg);	绕Y轴旋转10度。
	transform: rotateZ(10deg);	绕Z轴旋转10度。
缩放	transform: scale(2, 0.5);	X轴放大到2倍，Y轴缩小到0.5倍。
	transform: scale3d(2.5, 1.2, 0.3);	X、Y、Z轴。
	transform: scaleX(2);	X轴放大到2倍。
	transform: scaleY(0.5);	Y轴缩小到0.5倍。
	transform: scaleZ(0.3);	X轴缩小到0.5倍。
平移	transform: translate(12px, 50%);	沿X轴向排列方向平移12px，沿Y轴向下平移元素高度的50%。
	transform: translate3d(12px, 50%, 3em);	X、Y、Z轴。
	transform: translateX(2em);
	transform: translateY(3in);
	transform: translateZ(2px);
倾斜	transform: skew(30deg, 20deg);	沿X轴偏斜30度、沿Y轴偏斜20度。
	transform: skewX(30deg);
	transform: skewY(1.0rad);
自定义	transform: matrix(1, 2, 3, 4, 5, 6);	2D矩阵变换。
	transform: matrix3d(1, 0, …);	3D矩阵变换。
	transform: perspective(17px);
组合	transform: translateX(10px) rotate(10deg);

5.6. 响应式设计

表52 媒体特性
媒体特性	说明	示例
width	视口宽度（支持前缀 min/max）	(min-width: 768px)
height	视口高度（支持前缀 min/max）	(max-height: 600px)
orientation	设备方向（portrait 竖屏 / landscape 横屏）	(orientation: landscape)
aspect-ratio	视口宽高比	(aspect-ratio: 16/9)
resolution	屏幕分辨率	(min-resolution: 300dpi)
prefers-color-scheme	用户系统主题偏好（light/dark）	(prefers-color-scheme: dark)
prefers-reduced-motion	用户是否要求减少动画	(prefers-reduced-motion: reduce)
hover	设备是否支持悬停操作	(hover: none)
any-hover	是否有至少一种输入方式支持悬停	(any-hover: hover)
pointer	主输入设备的精度	(pointer: coarse)
any-pointer	是否有任意输入设备支持特定精度	(any-pointer: fine)
color-gamut	屏幕色域支持	(color-gamut: p3)
monochrome	设备是否为单色屏幕	(monochrome: 0)
display-mode	Web App 的显示模式（fullscreen/standalone等）	(display-mode: standalone)
inverted-colors	系统是否启用颜色反转	(inverted-colors: inverted)
scripting	检测JavaScript是否可用	(scripting: enabled)
update	屏幕刷新频率（fast/slow/none）	(update: slow)
overflow-block	块轴方向溢出处理方式（none/scroll/optional-paged/paged）	(overflow-block: scroll)
overflow-inline	行内方向溢出处理方式（none/scroll）	(overflow-inline: none)

5.7. 单位

表53 绝对距离单位
单位	说明
cm	厘米
mm	毫米
Q	1Q = 14 mm
in	英寸 1in = 2.54cm = 96px
pc	派卡 1pc = 1/6 in
pt	点 1pt = 1/72 in
px	像素 1px = 1/96 in
in	英寸 1in = 2.54cm = 96px
pc	派卡 1pc = 16 in
pt	点 1pt = 172 in
px	像素 1px = 196 in

表54 相对距离单位
单位	说明
cap	大写字母高度
ch	字符“0”的前进距离
em	font-size计算值
ex	小写字母高度
ic	字符“水”前进距离
lh	line-height计算值
rcap	根元素大写字母高度
rch	根元素字符“0”的前进距离
rem	根元素字符高度
rex	根元素小写字母高度
ric	根元素字符“水”前进距离
rlh	根元素行高
vw	视口宽度1%
vh	视口高度1%
vi
vb
vmin
vmax
sv*
lv*
dv*

表55 角度
角度	deg	度一个完整圆周有360度
	grad	梯度一个完整圆周有400梯度
	rad	弧度一个完整圆周有2π弧度
	turn	转一个完整圆周

表56 时间
时间	s	秒
	ms	毫秒

表57 频率
频率	Hz	赫兹
	kHz	千赫兹

表58 分辨率
分辨率	dpi	点每英尺
	dpcm	点每厘米
	ddpx	点每像素
	x	点每像素

5.8. 色彩

aliceblue

#f0f8ff

antiquewhite

#faebd7

aqua

#00ffff

aquamarine

#7fffd4

azure

#f0ffff

beige

#f5f5dc

bisque

#ffe4c4

black

#000000

blanchedalmond

#ffebcd

blue

#0000ff

blueviolet

#8a2be2

brown

#a52a2a

burlywood

#deb887

cadetblue

#5f9ea0

chartreuse

#7fff00

chocolate

#d2691e

coral

#ff7f50

cornflowerblue

#6495ed

cornsilk

#fff8dc

crimson

#dc143c

cyan

#00ffff

darkblue

#00008b

darkcyan

#008b8b

darkgoldenrod

#b8860b

darkgray

#a9a9a9

darkgreen

#006400

darkgrey

#a9a9a9

darkkhaki

#bdb76b

darkmagenta

#8b008b

darkolivegreen

#556b2f

darkorange

#ff8c00

darkorchid

#9932cc

darkred

#8b0000

darksalmon

#e9967a

darkseagreen

#8fbc8f

darkslateblue

#483d8b

darkslategray

#2f4f4f

darkslategrey

#2f4f4f

darkturquoise

#00ced1

darkviolet

#9400d3

deeppink

#ff1493

deepskyblue

#00bfff

dimgray

#696969

dimgrey

#696969

dodgerblue

#1e90ff

firebrick

#b22222

floralwhite

#fffaf0

forestgreen

#228b22

fuchsia

#ff00ff

gainsboro

#dcdcdc

ghostwhite

#f8f8ff

gold

#ffd700

goldenrod

#daa520

gray

#808080

green

#008000

greenyellow

#adff2f

grey

#808080

honeydew

#f0fff0

hotpink

#ff69b4

indianred

#cd5c5c

indigo

#4b0082

ivory

#fffff0

khaki

#f0e68c

lavender

#e6e6fa

lavenderblush

#fff0f5

lawngreen

#7cfc00

lemonchiffon

#fffacd

lightblue

#add8e6

lightcoral

#f08080

lightcyan

#e0ffff

lightgoldenrodyellow

#fafad2

lightgray

#d3d3d3

lightgreen

#90ee90

lightgrey

#d3d3d3

lightpink

#ffb6c1

lightsalmon

#ffa07a

lightseagreen

#20b2aa

lightskyblue

#87cefa

lightslategray

#778899

lightslategrey

#778899

lightsteelblue

#b0c4de

lightyellow

#ffffe0

lime

#00ff00

limegreen

#32cd32

linen

#faf0e6

magenta

#ff00ff

maroon

#800000

mediumaquamarine

#66cdaa

mediumblue

#0000cd

mediumorchid

#ba55d3

mediumpurple

#9370db

mediumseagreen

#3cb371

mediumslateblue

#7b68ee

mediumspringgreen

#00fa9a

mediumturquoise

#48d1cc

mediumvioletred

#c71585

midnightblue

#191970

mintcream

#f5fffa

mistyrose

#ffe4e1

moccasin

#ffe4b5

navajowhite

#ffdead

navy

#000080

oldlace

#fdf5e6

olive

#808000

olivedrab

#6b8e23

orange

#ffa500

orangered

#ff4500

orchid

#da70d6

palegoldenrod

#eee8aa

palegreen

#98fb98

paleturquoise

#afeeee

palevioletred

#db7093

papayawhip

#ffefd5

peachpuff

#ffdab9

peru

#cd853f

pink

#ffc0cb

plum

#dda0dd

powderblue

#b0e0e6

purple

#800080

rebeccapurple

#663399

red

#ff0000

rosybrown

#bc8f8f

royalblue

#4169e1

saddlebrown

#8b4513

salmon

#fa8072

sandybrown

#f4a460

seagreen

#2e8b57

seashell

#fff5ee

sienna

#a0522d

silver

#c0c0c0

skyblue

#87ceeb

slateblue

#6a5acd

slategray

#708090

slategrey

#708090

snow

#fffafa

springgreen

#00ff7f

steelblue

#4682b4

tan

#d2b48c

teal

#008080

thistle

#d8bfd8

tomato

#ff6347

transparent

#00000000

turquoise

#40e0d0

violet

#ee82ee

wheat

#f5deb3

white

#ffffff

whitesmoke

#f5f5f5

yellow

#ffff00

yellowgreen

#9acd32

5.9. 字体

表59 字体样式
属性	说明
font	简写属性，设置字体样式/大小/字重/字体族
font-family	指定字体名称
font-size	设置字体大小
font-style	控制斜体显示
font-weight	设置字重
letter-spacing	字符间距
line-break	控制换行规则
line-clamp	限制文本显示行数
line-height	设置行高
text-align	文本水平对齐方式
text-align-last	最后一行对齐方式
text-decoration	文本装饰简写属性
text-decoration-color	文本装饰线颜色
text-decoration-line	文本装饰线类型
text-decoration-style	文本装饰线样式
text-decoration-thickness	文本装饰线粗细
text-emphasis	文本强调标记简写属性
text-emphasis-color	强调标记颜色
text-emphasis-position	强调标记位置
text-emphasis-style	强调标记形状
text-indent	首行缩进
text-justify	文本对齐方式
text-orientation	文字方向控制
text-overflow	溢出文本显示方式
text-shadow	文字阴影效果
text-transform	文本大小写转换
text-underline-offset	下划线偏移距离
text-underline-position	下划线位置
text-wrap	文本换行规则
text-wrap-mode	换行模式
text-wrap-style	换行样式
word-break	单词换行方式
word-spacing	单词间距

表60 通用字体族名
字体族名	说明
serif	衬线字体，笔画有装饰
sans-serif	无衬线字体，笔画没有装饰
monospace	等宽字体
cursive	手写体
fantasy	艺术体
system-ui	系统默认字体
ui-serif	系统默认衬线字体
ui-sans-serif	系统默认无衬线字体
ui-monospace	系统默认等宽字体
ui-rounded	系统默认圆体
math	适合数学公式的字体
emoji	Emoji表情字体
fangsong	仿宋体
kai	楷体
nastaliq	波斯悬体
khmer-mul	高棉文字体