CSS 值和单位模块第 3 级

1. 介绍

每个 CSS 属性的值定义字段可以包含关键字、数据类型（出现在 < 和 > 之间）， 以及关于如何组合它们的信息。通用数据类型（<length> 是使用最广泛的）在本规范中进行了描述， 而更具体的数据类型（例如 <spacing-limit>）在相应的模块中进行了描述。

1.1. 模块交互

本模块替代并扩展了 [CSS2] 第 1.4.2.1、4.3 和 A.2 节中的数据类型定义。

2. 值定义语法

此处描述的 值定义语法 用于定义 CSS 属性的有效值集合（以及 CSS 许多其他部分的有效语法）。 这样描述的值可以具有一个或多个组件。

2.1. 组件值类型

组件值类型通过几种方式指定：

1. 关键字 值（如 auto、disc 等）， 以字面形式出现，无需引号（例如 auto）。

2. 基本数据类型， 以 < 和 > 之间的形式出现（例如，<length>、<percentage> 等）。 对于 数值数据类型， 这种类型标记可以使用 括号范围标记 来注释任何范围限制。

3. 属性值范围， 代表与具有相同名称的属性相同的值模式。 这些以属性名称书写， 用单引号括起来， 位于 < 和 > 之间， 例如，<'border-width'>、<'background-attachment'> 等。

   这些类型 不包括 CSS 广泛关键字，如 inherit。 此外， 如果属性的值语法 是 以逗号分隔的重复， 则相应类型 不包括顶级 以逗号分隔的列表乘数。 （例如，如果一个名为 pairing 的属性定义为 [ <custom-ident> <integer>? ]#， 则 <'pairing'> 等价于 [ <custom-ident> <integer>? ]， 而不是 [ <custom-ident> <integer>? ]#。）

   为什么要去掉乘数？

   顶级乘数被剔除出这些值类型 是因为顶级以逗号分隔的重复主要用于 协调列表属性， 当一个简写组合了几个这样的属性时， 它需要未乘数的语法 以便构建其 自己的 以逗号分隔的重复。

   没有这种特殊处理， 每个这样的长手写形式都必须用一个临时生成来定义 仅用于内部值， 这使得语法整体上更难以理解。

4. 函数表示法及其参数。 这些以函数名书写， 后面跟一对空括号， 位于 < 和 > 之间， 例如 <calc()>， 并引用相应名称的 函数表示法。

5. 其他非终结符。 这些以非终结符的名称书写 位于 < 和 > 之间， 如 <spacing-limit>。 注意 <border-width> 和 <'border-width'> 之间的区别： 后者代表 border-width 属性的语法， 前者要求在其他地方进行显式扩展。 非终结符的定义通常位于其在规范中的首次出现附近。

一些属性值定义还包括斜杠 (/)、逗号 (,) 和/或括号作为文字。 这些代表其相应的标记。 其他可能出现在组件值中的非关键字文字字符， 如“+”， 必须用单引号括起来。

在语法中指定的逗号 在某些情况下是隐式可省略的， 用于分隔语法中的可选项时。 在属性或其他 CSS 值中的顶级列表内， 或函数的参数列表中， 如果满足以下条件，语法中指定的逗号必须被省略：

• 逗号之前的所有项均已省略
• 逗号之后的所有项均已省略
• 由于逗号之间的项被省略，多个逗号将相邻（忽略 空格/注释）。

example( first? , second? , third? )

所有 CSS 属性也接受 CSS 广泛关键字值 作为其属性值的唯一组件。 为了可读性，这些在属性值语法定义中没有被明确列出。 例如，border-color 在 CSS 级联与继承 第三版 下的完整值定义是 <color>{1,4} | inherit | initial | unset （尽管它被列为 <color>{1,4}）。

注意： 这意味着，通常情况下， 将这些关键字与同一声明中的其他组件值结合 会导致无效声明。 例如，background: url(corner.png) no-repeat, inherit; 是无效的。

2.2. 组件值组合器

组件值可以按以下方式排列成属性值：

• 并排组件意味着 所有组件必须按给定顺序出现。
• 双和符号 (&&) 分隔两个或多个组件， 所有组件必须出现，顺序可以任意。
• 双竖线 (||) 分隔两个或多个选项： 其中一个或多个必须出现，顺序可以任意。
• 竖线 (|) 分隔两个 或多个替代项： 其中恰好一个必须出现。
• 方括号 ([ ]) 用于分组。

并排关系比双和符号更强，双和符号比双竖线更强，双竖线比竖线更强。因此，以下行是等效的：

  a b   |   c ||   d &&   e f
[ a b ] | [ c || [ d && [ e f ]]]

对于可重排序组合器 (||, &&), 语法的顺序并不重要： 同一分组中的组件可以以任意顺序交错。 因此，以下行是等效的：

a || b || c
b || a || c

注意： 组合器 不是 结合的，因此 分组是重要的。 例如， a || b || c 和 a || [ b || c ] 是不同的 语法： 第一个允许像 b a c 的值，但第二个不允许。

2.3. 组件值乘数

每种类型、关键字或括号组后面都可以跟随以下修饰符之一：

• 星号 (*) 表示前面的类型、单词或组 出现零次或多次。
• 加号 (+) 表示前面的类型、单词或组 出现一次或多次。
• 问号 (?) 表示前面的类型、单词或组 是可选的（出现零次或一次）。
• 大括号中的单个数字 ({A}) 表示前面的类型、单词或组 出现 A 次。
• 大括号中的逗号分隔的数字对 ({A,B}) 表示前面的类型、单词或组 至少出现 A 次，最多出现 B 次。 B 可以省略 ({A,}) 表示必须至少重复 A 次， 而重复次数没有上限。
• 井号 (#) 表示前面的类型、单词或组 出现一次或多次，以逗号标记分隔 （可以选择性地被 空白 字符 和/或注释包围）。 它可以选择性地跟随上述的大括号形式， 以指示确切的重复次数， 例如 <length>#{1,4}。
• 感叹号 (!) 在组后面 表示该组是必需的， 并且必须至少产生一个值； 即使组内项目的语法 否则允许完全省略内容， 也必须至少有一个组件值不被省略。

+ 和 # 乘数可以堆叠为 +#; 类似地，# 和 ? 乘数可以堆叠为 #?。 这些堆叠各自表示后续乘数 应用于早期乘数的结果。 （这些相同的堆叠可以通过分组表示， 但在复杂的语法中，这可能使括号的数量超出可读性。）

对于重复的组件值（由 *、+ 或 # 表示），用户代理 必须支持至少 20 次组件的重复。 如果属性值包含超过支持的重复次数， 则该声明必须被忽略，仿佛它是无效的。

2.4. 组合器和乘数模式

有一小组常见的方式可以组合多个独立的 组件值， 在特定的数量和顺序中。 特别是，常常希望表达从一组组件值中， 作者必须选择零个或多个、一个或多个，或全部组件， 并且顺序可以是语法中指定的顺序或任意顺序。

所有这些都可以通过简单的 组合器 和 乘数 模式轻松表达：

注意，所有“任意顺序”的可能性都是通过组合器表达的， 而“按顺序”的可能性都是并排的变体。

2.5. 组件值和空白

除非另有说明，空白 和/或 注释可以出现在组件之前、之后和/或之间， 这些组件是通过上述 组合器 和 乘数 组合的。

注意： 在许多情况下，实际上 需要 在组件之间有空格， 以区分它们。 例如，值 1em2em 将被解析为一个单一的 <dimension-token>，其中数字为 1 和标识符 em2em， 这是一个无效的单位。 在这种情况下，必须在 2 之前有一个空格，以将其解析为两个 长度 1em 和 2em。

2.6. 属性值示例

下面是一些属性及其相应的值定义字段的示例

3. 文本数据类型

文本数据类型包括各种关键字和标识符，以及字符串（<string>）和 URL（<url>）。

CSS 标识符， 通用记作 <ident>， 由符合<ident-token>语法的一系列字符组成。[CSS-SYNTAX-3]标识符不能带引号； 否则会被解释为字符串。 CSS 属性接受两类标识符：预定义关键字和作者自定义标识符。

注意：<ident>产生式不用于属性值定义——应使用<custom-ident>。 它作为定义其他语法结构的便利方式提供。

3.1. 预定义关键字

在值定义字段中，关键字以字面形式出现，具有预定义的意义。 关键字是标识符，并被解释为ASCII 不区分大小写（即，[a-z] 和 [A-Z] 是等价的）。

值: collapse | separate

table { border-collapse: separate }

3.1.1. CSS 广泛关键字： initial、 inherit 和 unset

如上面定义的，所有属性都接受CSS 广泛关键字， 这些关键字代表所有 CSS 属性的值计算。 这些关键字在CSS 级联和继承模块中有规范性定义。

其他 CSS 规范可以定义附加的 CSS 广泛关键字。

3.2. 作者定义的标识符： <custom-ident> 类型

某些属性接受任意的作者定义标识符作为组件值。 这种通用数据类型用<custom-ident>表示， 代表任何有效的CSS 标识符，在该属性的值定义中不会被误解为预定义 关键字。 这些标识符是完全区分大小写的， 即使在 ASCII 范围内 （例如，example 和 EXAMPLE 是两个不同的、不相关 的用户定义标识符）。

CSS 广泛关键字 不是有效的<custom-ident>。 default 关键字是保留的 也不是有效的<custom-ident>。 使用<custom-ident>的规范必须 清楚地指定 其他哪些关键字被排除在<custom-ident>之外，如果有的话——​例如，可以说明 该属性值定义中的任何预定义关键字被排除。 排除的关键字在所有ASCII 不区分大小写的排列中被排除。

在属性值中解析位置模糊的关键字时， 只有当没有其他未满足的生成可以声称该关键字时， <custom-ident> 生成才可以声称该关键字。

注意： 在设计带有<custom-ident>的语法时， <custom-ident>应始终为 “位置无歧义”， 以确保与该属性中的任何关键字值没有冲突。

3.3. 引号字符串： <string> 类型

字符串用 <string> 表示。 当字面写出时， 它们由用双引号或单引号分隔的一系列字符组成， 对应于<string-token> 生成 在CSS 语法模块 [CSS-SYNTAX-3]。

content: "this is a 'string'.";
content: "this is a \"string\".";
content: 'this is a "string".';
content: 'this is a \'string\'.'

出于美观或其他原因，可以将字符串分成多行，但在这种情况下，换行符本身必须用反斜杠（\）转义。 换行符随后会从字符串中移除。例如，以下两个选择器是完全相同的：

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}

由于字符串不能直接表示换行符，要在字符串中包含换行符，请使用转义字符 "\A"。 （十六进制 A 是 Unicode 中的换行符字符（U+000A），但在 CSS 中表示“换行”的通用概念。）

3.4. 资源定位符： <url> 类型

url() 功能 语法， 用<url>表示， 表示一个URL， 是指向资源的指针。 <url> 的典型语法是：

<url> = url( <string> <url-modifier>* )

body { background: url("http://www.example.com/pinkish.gif") }

url() 也可以不带引号书写 URL 值，在这种情况下，它会被特别解析为<url-token>；见CSS 语法 3 § 4.3.6 消费一个 URL 标记。 [CSS-SYNTAX-3]

background: url("http://www.example.com/pinkish.gif");
background: url(http://www.example.com/pinkish.gif);

注意： 不带引号的url() 语法不能接受<url-modifier> 参数 并且有额外的转义要求： 括号、空格字符， 单引号（'）和双引号（"）出现在 URL 中 必须用反斜杠转义， 例如url(open\(parens)、url(close\)parens)。 （在引号包围的<string> url()中， 只有换行符和用于引号的字符需要转义。） 根据 URL 的类型， 可能还可以将这些字符写成 URL 转义形式 （例如url(open%28parens)或url(close%29parens)） 如[URL]所述。

某些 CSS 上下文（如@import）也允许<url> 用裸<string>表示，而不带函数包装。 在这种情况下，字符串的行为与包含该字符串的url() 函数完全相同。

@import url("base-theme.css");
@import "base-theme.css";

3.4.1. 相对URL

为了创建不依赖于资源绝对位置的模块化样式表，作者应使用相对URL。 相对URL（如[URL]定义）使用基URL解析为完整的URL。 RFC 3986第3节定义了此过程的规范算法。 对于CSS样式表，基URL为样式表本身的URL，而不是样式源文档的URL。 嵌入在文档中的样式表具有与其容器关联的基URL。

注意：对于HTML文档， 基URL是可变的。

当<url> 出现在属性的计算值中时， 它将解析为绝对URL， 如前段所述。 UA无法解析为绝对URL的URL的计算值为指定值。

body { background: url("tile.png") }

http://www.example.org/style/basic.css

http://www.example.org/style/tile.png

3.4.1.1. 片段 URL

为了处理浏览器 URL 处理中的一些常见特殊情况，CSS 对仅包含片段的 URL 有特殊行为。

如果一个 url() 的值 以 U+0023 NUMBER SIGN (#) 字符开头，正常解析 URL， 但额外设置 本地 URL 标志，用于 url()。

当与设置了 url() 的 本地 URL 标志 匹配时，忽略除 URL 的片段以外的所有内容， 并将该片段解析为相对于当前文档的 URL。此引用必须始终视为同一文档 （而不是跨文档）。

在 序列化 设置了 url() 的 本地 URL 标志 时， 必须仅序列化为片段。

3.4.2. 空URL

如果<url>的值为空字符串 （如url("")或url()）， 该URL必须解析为无效资源 （类似于URLabout:invalid的行为）。

它的计算值是url("")， 并且必须按此序列化。

注意：这与网络平台上其他嵌入资源的空URL行为一致， 并避免因编辑错误导致的样式表或主文档的过多流量请求， 由于url()值为空， 这几乎肯定是任何url()出现在时的无效资源。 网络平台上的链接确实允许空URL， 因此如果/当CSS获得一些控制超链接的功能时， 此限制可以在那些上下文中放宽。

3.4.3. URL修饰符

url()函数 支持指定额外的<url-modifier>， 这些修饰符以某种方式改变URL的含义或解释。 <url-modifier>可以是<ident>或函数表示法。

本规范未定义任何<url-modifier>， 但其他规范可能会定义。

注意：一个<url>如果没有引号或没有包裹在url()表示法中， 不能接受任何<url-modifier>。

4. 数值数据类型

数值数据类型用于表示 数量、索引、位置和其他此类值。 尽管在表达给定数值的数量（数值方面）时可能存在许多语法变体， 但指定和计算 值并不区分这些变体： 它们表示值的抽象数量， 而不是其语法表示。

数值数据 类型包括<integer>、<number>、<percentage>， 以及各种维度，包括<length>、<angle>、<time>、<frequency>和<resolution>。

注意：虽然这里定义了通用的维度， 但一些其他模块定义了额外的数据类型 （例如[css-grid-1]引入了fr单位） 其使用更为局部化。

4.1. 范围限制和范围定义符号

属性可以限制数值在某个范围内。 如果值超出允许范围， 除非另有说明， 否则声明是无效的，必须被忽略。 范围限制可以在数值类型符号中注释 使用CSS括号范围符号——[min,max]—— 在尖括号内，标识关键字后面， 表示在（包括）min和max之间的闭合范围。 例如，<integer [0,10]>表示一个介于0和10之间的整数，包括在内， 而<angle [0,180deg]>表示一个介于0deg和180deg之间的角度（可以用任何单位表示）。

注意：CSS值通常不允许开放范围； 因此仅使用方括号符号。

CSS理论上支持所有值类型的无限精度和无限范围； 但是在现实中，实现是有限的。用户代理应该支持 合理有用的范围和精度。 理想情况下无限的范围极限 使用∝或−∞来表示。 例如，<length [0,∞]>表示非负长度。

如果未指示范围， 无论是使用括号范围符号还是在属性描述中， 则假定为[−∞,∞]。

−∞或∞的值必须不带单位书写， 即使值类型使用单位。 0的值可以不带单位书写， 即使值类型不允许“无单位零” （如<time>）。

注意：在撰写时， 括号范围符号是新的； 因此在大多数CSS规范中 任何范围限制仅以散文描述。 （例如，“不允许负值”或 “负值无效” 表示[0,∞]范围。） 这并不使它们不具约束力。

4.2. 整数：<integer> 类型

整数值用<integer>表示。

当字面写出时， 整数是一个或多个 十进制数字0至9，对应于<number-token>在CSS语法模块[CSS-SYNTAX-3]中的一个子集。 整数的首位数字可以前面紧跟-或+以表示整数的符号。

4.3. 实数：<number> 类型

数值用<number>表示， 代表实数，可能带有小数部分。

当字面写出时， 数字可以是一个整数， 或零或多个十进制数字后跟一个点（.）再后跟一个或多个十进制数字； 可选地，它可以以字母“e”或“E”结束 后跟一个整数，表示以十为底的指数， 在科学记数法中。 它对应于<number-token>在CSS语法模块 [CSS-SYNTAX-3]中的一个定义。 和整数一样，数字的第一个字符也可以前面紧跟-或+以表示 数字的符号。

4.4. 带单位的数字：dimension值

一般术语维度 指带有单位的数字； 用<dimension>表示。

当字面写出时， 维度是一个数字后面紧跟一个单位 标识符， 这是一个标识符。 它对应于<dimension-token>在CSS语法模块 [CSS-SYNTAX-3]中的一个定义。 类似于关键字，单位标识符是ASCII 不区分大小写。

CSS使用<dimension>s来指定 距离（<length>）， 持续时间（<time>）， 频率（<frequency>）， 分辨率（<resolution>）， 以及其他数量。

4.4.1. 兼容单位

在序列化 计算值 [CSSOM]中， 兼容单位（由静态乘法因子相关联的单位， 如px与in之间的 96:1 因子， 或计算的字体大小 因子在em和px之间） 被转换为一个单一的规范单位。 每组兼容单位定义了其中哪个单位是将用于 序列化的规范单位。

在序列化已解析值时， 作为使用值， 所有表示长度的值类型（百分比、数字、关键字等） 都被视为与长度兼容。 同样，任何返回使用值的未来 API 必须将任何表示距离/持续时间/频率等的值 视为与相关的维度类 兼容， 并相应地规范化。

4.5. 百分比：<percentage> 类型

百分比值用<percentage>表示， 表示某个参考值的一部分。

当字面书写时， 百分比由一个数字后面紧跟一个百分号 %构成。 它对应于<percentage-token>生成 在CSS 语法模块 [CSS-SYNTAX-3]中。

百分比值总是相对于另一个量， 例如长度。 每个允许百分比的属性还定义了该百分比所指的量。 该量可以是同一元素的另一个属性值， 祖先元素的属性值， 格式化上下文的测量 （例如，包含块的宽度）， 或其他东西。

4.6. 混合百分比和维度

在<percentage>可以在同一维度中表示相同数量的情况下， 可以在同一组件值位置中结合它们， 因此可以在calc()表达式中使用以下便利符号：

<length-percentage>

等价于 [ <length> | <percentage> ]， 其中<percentage>将解析为<length>。

<frequency-percentage>

等价于 [ <frequency> | <percentage> ]， 其中<percentage>将解析为<frequency>。

<angle-percentage>

等价于 [ <angle> | <percentage> ]， 其中<percentage>将解析为<angle>。

<time-percentage>

等价于 [ <time> | <percentage> ]， 其中<percentage>将解析为<time>。

注意： 规范不应在语法中 交替使用<percentage>代替维度， 除非它们是兼容的。

注意： 将来可以根据需要添加更多的 <type-percentage> 生产。 不会添加 <number-percentage>， 因为<number>和<percentage>不能在calc()中结合。

5. 距离单位：<length> 类型

长度指的是距离测量，在属性定义中用 <length> 表示。长度是一个 维度。

对于零长度，单位标识符是可选的 （即可以在语法上表示为 <number> 0）。 但是，如果0 可以被解析为 <number> 或 <length>，在一个属性中 （如 line-height）， 它必须被解析为 <number>。

属性可能限制长度值在某个范围内。 如果值超出允许范围， 声明是无效的并且必须被忽略。

虽然有些属性允许负长度值， 这可能会使格式化变得复杂，并可能存在实现特定的限制。 如果允许负长度值但无法支持， 必须将其转换为可以支持的最近值。

在无法支持使用长度的情况下， 用户代理必须在实际值中进行近似。

长度单位有两种类型：相对和绝对。

5.1. 相对长度

相对长度单位指定相对于另一长度的长度。 使用相对单位的样式表可以更容易地从一个输出环境缩放到另一个。

相对单位有：

子元素不继承其父元素的相对值； 它们继承计算值。

5.1.1. 字体相对长度：em、ex、 ch、rem 单位

字体相对长度 指的是用于的元素的字体度量——或者在 rem 的情况下，根元素的度量。

em

等于用于的元素的 font-size 属性的计算值。

规则：

h1 { line-height: 1.2em }

意味着 h1 元素的行高将比 h1 元素的字体大小大20%。另一方面：

h1 { font-size: 1.2em }

意味着 h1 元素的字体大小将比 h1 元素继承的计算字体大小大20%。

rem

等于根元素的 em 单位的计算值。

ex unit

等于 首个可用字体的使用x高度[CSS3-FONTS]。 x高度之所以被称为x高度，是因为它通常等于小写字母"x"的高度。 然而，即使某些字体不包含"x"，ex 仍然会被定义。 字体的x高度可以通过不同方式找到。 一些字体包含可靠的x高度度量。 如果没有可靠的字体度量，用户代理可以根据小写字母的高度确定x高度。 一种可能的启发式方法是查看小写字母"o"的字形向下延伸到基线的距离，并从其边界框的顶部减去该值。 在无法或不切实际确定x高度的情况下，必须假定值为0.5em。

ch unit

表示欧洲字母数字字符的典型进位度量，并以用于呈现的字体中“0”（零，U+0030）字形的使用进位度量进行测量。 （字形的 进位度量 是其进位宽度或高度，取决于哪个在元素的内联轴上。）

注意： 此测量是单个窄字形的进位度量的一个近似值（在等宽字体中是一个确切测量）， 允许基于预期字形计数的测量。

注意： 字形的进位度量取决于 书写模式和文本方向 以及字体设置、文本变换和任何其他影响字形选择或方向的属性。

在无法或不切实际确定“0”字形的度量时，必须假定其宽度为0.5em，高度为1em。 因此，ch 单位在一般情况下回退到 0.5em， 当它以直立形式排版时回退到1em （即writing-mode 是vertical-rl或vertical-lr，并且text-orientation 是upright）。

在元素的上下文之外使用时 （例如在 媒体查询 中）， 这些单位指的是与 字体 属性的初始值相对应的计算字体度量。 当用在元素的 font-size 属性的值中时，它们指的是父元素的计算字体度量 （或者如果元素没有父元素，则指的是与 字体 属性的初始值相对应的计算字体度量）。

在没有形状化的情况下计算 字体相对长度。

5.1.2. 视口百分比长度：vw，vh，vmin，vmax 单位

视口百分比长度 相对于 初始包含块 的大小—— 这本身基于视口的大小（用于 连续媒体） 或 页面区域（用于 分页媒体）。 当初始包含块的高度或宽度改变时， 它们也会相应缩放。 然而，假设没有滚动条。

对于 分页媒体，视口百分比长度的确切定义 延后到 [CSS3PAGE]。

vw 单位

等于初始包含块宽度的 1%。

在下面的例子中，如果视口的宽度为 200mm， h1 元素的字体大小将为 16mm （即（8×200mm）/100）。

h1 { font-size: 8vw }

vh 单位

等于初始包含块高度的 1%。

vmin 单位

等于 vw 或 vh 中较小的一个。

vmax 单位

等于 vw 或 vh 中较大的一个。

5.2. 绝对长度：cm、mm、Q、in、pt、pc、px 单位

绝对长度单位彼此之间是固定的，并且锚定在某种物理测量上。 当输出环境已知时，它们主要是有用的。 绝对单位包括 物理单位（英寸，厘米，毫米，点，派卡，Q） 和视觉角度单位（像素单位）（像素）：

h1 { margin: 0.5in }      /* 英寸 */
h2 { line-height: 3cm }   /* 厘米 */
h3 { word-spacing: 4mm }  /* 毫米 */
h3 { letter-spacing: 1Q } /* 四分之一毫米 */
h4 { font-size: 12pt }    /* 点 */
h4 { font-size: 1pc }     /* 派卡 */
p  { font-size: 12px }    /* 像素 */

注意： 在出版环境中，长度有时会写成 2p3，表示长度为 2 个 picas 和 3 个 points。可以在 CSS 中写成 calc(2pc + 3pt)（见 § 8.1 数学表达式：calc()）。

所有绝对长度单位都是 兼容的，px 是它们的 规范单位。

对于 CSS 设备，这些尺寸通过以下方式被 锚定：

1. 通过将 物理单位 与其物理测量相关联，或
2. 通过将 像素单位 与 参考像素 相关联。

对于典型观看距离的印刷媒体，锚单位 应该是 物理单位（英寸、厘米等）。对于屏幕媒体（包括高分辨率设备）、低分辨率设备和具有不寻常观看距离的设备，建议 锚单位 应为 像素单位。对于此类设备，建议 像素单位 指的是最接近参考像素的 设备像素 的整数数量。

注意： 如果 锚单位 是 像素单位，则 物理单位 可能与其物理测量不匹配。相反，如果 锚单位 是 物理单位，则 像素单位 可能不会映射到完整的 设备像素。

注意： 这种 像素单位 和 物理单位 的定义与 CSS1 和 CSS2 的早期版本不同。特别是在 CSS 的早期版本中，像素单位 和 物理单位 并没有通过固定比率相关联：物理单位 总是与其物理测量相关联，而 像素单位 则会变化，以最接近参考像素。（这一不幸的变化是因为现有内容过于依赖于 96dpi 的假设，而打破这一假设则破坏了内容。）

注意： 单位是 ASCII 大小写不敏感 的并以小写序列化，例如 1Q 序列化为 1q。

该参考像素是 在距离读者一个手臂的长度下，设备的设备像素密度为96dpi时，一个像素的视觉角度。 对于名义上的28英寸手臂长度， 视觉角度约为0.0213度。 在手臂长度下阅读时， 1px大约对应于0.26毫米（1/96英寸）。

下图说明了观看距离对参考像素大小的影响：71 cm（28 英寸）的观看距离导致参考像素为 0.26 mm，而 3.5 m（12 英尺）的观看距离导致参考像素为 1.3 mm。

第二幅图说明了设备分辨率对像素单位的影响：在低分辨率设备（例如典型计算机显示器）上，1px x 1px 的区域由一个点覆盖，而在高分辨率设备（如打印机）上，相同区域由 16 个点覆盖。

设备像素 是设备输出上最小的面积单位，能够显示其全色范围。对于典型的彩色屏幕，它是一个方形或稍长方形的区域，包含红色、绿色和蓝色子像素。许多非传统输出存在，可以模糊这个定义，例如通过以更高的分辨率显示某些颜色。然而，此类设备仍然暴露出某种等效的“设备像素”的概念。

6. 其他数量

6.1. 角度单位：<angle> 类型和deg、grad、rad、turn 单位

角度值是<dimension>，以<angle>表示。 角度单位标识符为：

deg

度。一个完整的圆有360度。

grad

渐度，也称为“gons”或“grades”。 一个完整的圆有400渐度。

rad

弧度。一个完整的圆有2π弧度。

turn

转。一个完整的圆为1转。

例如，直角为90deg或100grad或0.25turn或 约1.57rad。

所有<angle>单位是兼容的， 而deg是它们的标准单位。

注意：由于遗留原因， 某些情况下<angle>允许裸露的0表示0deg。 然而，这并不适用于一般情况， 并且在<angle>类型的未来使用中不会出现。

6.2. 持续时间单位：<time> 类型和s、ms 单位

时间值是维度，以 <time>表示。 时间单位标识符为：

s

秒。

ms

毫秒。每秒有1000毫秒。

所有<time> 单位是兼容的， 而s是它们的标准单位。

属性可能会限制时间值的某个范围。 如果值超出允许范围， 声明是无效的，必须被忽略。

6.3. 频率单位：<frequency> 类型和Hz、kHz 单位

频率值是维度，以 <frequency>表示。 频率单位标识符为：

Hz

赫兹。表示每秒的发生次数。

kHz

千赫兹。一千赫兹为1千赫兹。

例如，表示声音音高时，200Hz（或200hz）是低音，6kHz（或6khz）是高音。

所有<frequency>单位是兼容的， 而hz是它们的标准单位。

注意：单位是ASCII 不区分大小写，序列化为小写，例如1Hz序列化为1hz。

6.4. 分辨率单位：<resolution> 类型和dpi、dpcm、dppx 单位

分辨率单位是维度，以 <resolution>表示。 分辨率单位标识符为：

dpi

每英寸点数。

dpcm

每厘米点数。

dppx

每px单位的点数。

<resolution>单位表示图形表示中单个“点”的大小， 指示这些点在CSS 英寸、厘米或像素中有多少个点。 用法见例如[MEDIAQ]中的resolution媒体查询或在image-resolution属性中定义的内容，该属性在[CSS3-IMAGES]中定义。

所有<resolution>单位都是兼容的， dppx是它们的标准单位。

允许的<resolution>值始终排除负值， 除了可能指定的任何明确范围。

请注意，由于CSS 英寸与CSS 像素的1:96固定比率，1dppx等于96dpi。 这对应于在CSS中显示的图像的默认分辨率： 参见image-resolution。

@media (min-resolution: 2dppx) { ... }

7. 数据类型在其他地方定义

某些数据类型在它们自己的模块中定义。 本示例讨论一些在多个规范中常用的数据类型。

7.1. 颜色：<color> 类型

<color> 数据类型在[CSS3COLOR]中定义。 支持 CSS 颜色第 3 级或其后续版本的用户代理必须按其定义解释<color>。

7.2. 图像：<image> 类型

<image> 数据类型在[CSS3-IMAGES]中定义。 支持 CSS 图像第 3 级或其后续版本的用户代理必须按其定义解释<image>。 尚未支持 CSS 图像第 3 级的用户代理必须将<image>解释为<url>。

7.3. 2D 定位：<position> 类型

<position> 值指定对象区域（例如背景图像） 在定位区域（例如背景定位区域）内的位置。 它的计算和解释按background-position 的规定进行。[CSS3-BACKGROUND]

<position> = [
  [ left | center | right | top | bottom | <length-percentage> ]
|
  [ left | center | right ] && [ top | center | bottom ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]
|
  [ [ left | right ] <length-percentage> ] &&
  [ [ top | bottom ] <length-percentage> ]
]

注意： background-position 属性还接受三值语法。 由于与其他长度或百分比组件结合使用时会产生解析歧义，因此已在通用情况下禁止使用。

序列化时的标准顺序为水平分量在前，垂直分量在后。

当在语法中与其他关键字、<length> 或 <percentage> 一起指定时，<position> 将被 贪婪地 解析；它会消耗尽可能多的组件。

8. 函数表示法

函数表示法 是一种组件值类型 ，可以表示更复杂的类型或调用特殊处理。 语法以函数名称开头， 后面紧跟一个左括号 （即 <function-token>） 后跟表示法的参数 ，最后以右括号结束。 像关键字一样，函数名称是 ASCII 不区分大小写。允许使用 空格， 但可选， 在括号内立即使用。 函数可以接受多个参数， 格式与 CSS 属性值类似。

注意： 一些遗留的 函数表示法，如 rgba()，不必要地使用逗号， 但通常逗号仅用于分隔列表中的项目， 或语法中的片段，否则可能会造成歧义。 如果逗号用于分隔参数，空格 在逗号前后是可选的。

background: url(http://www.example.org/image);
color: rgb(100, 200, 50 );
content: counter(list-item) ". ";
width: calc(50% - 2em);

8.1. 数学表达式： calc()

calc() 函数 允许将数值 CSS 组件值 作为数学表达式书写， 使用加法 (+), 减法 (-), 乘法 (*) 和/或 除法 (/).

该 calc() 表达式表示其包含的数学计算结果， 该结果使用标准运算符优先级规则进行评估 （* 和 / 的优先级高于 + 和 -， 其他运算符从左到右进行评估）。

它可以在任何 <length>、 <frequency>、 <angle>、 <time>、 <percentage>、 <number>，或 <integer> 值的地方使用。 calc() 表达式的组成部分可以是字面值或 或 calc() 表达式。

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
}

:root {
  font-size: calc(100vw / 40);
}

.foo {
  background: url(top.png), url(bottom.png);
  background-repeat: no-repeat;
  background-position: 50% 50%, calc(50% + 20px) calc(50% + 20px);
}

.foo {
  background-image: linear-gradient(to right, silver,
                                              white 50px,
                                              white calc(100% - 50px),
                                              silver);
}

8.1.1. 语法

calc() 函数的语法是：

<calc()> = calc( <calc-sum> )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <calc-number-value> ]*
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
<calc-number-sum> = <calc-number-product> [ [ '+' | '-' ] <calc-number-product> ]*
<calc-number-product> = <calc-number-value> [ '*' <calc-number-value> | '/' <calc-number-value> ]*
<calc-number-value> = <number> | ( <calc-number-sum> )

此外，空格 在 + 和 - 运算符两侧都是必需的。 （* 和 / 运算符可以在周围没有空格的情况下使用。）

用户代理必须支持至少 20 个项的 calc() 表达式，其中每个 NUMBER、DIMENSION 或 PERCENTAGE 都是一个项。 如果 calc() 表达式包含超过支持的 项数，必须视为无效。

8.1.2. 类型检查

数学表达式有一个 解析类型，其类型为 <length>、<frequency>、<angle>、<time>、<percentage>、<number> 或 <integer>。 解析类型 必须在表达式 所在的位置有效；否则，表达式无效。 表达式的 解析类型 由其包含的值的类型决定。 <number-token>s 的类型为 <number> 或 <integer>。 <dimension-token> 的类型由其单位给出 （cm 是 <length>，deg 是 <angle>， 等等）。

注意：因为 <number-token>s 总是被解释为 <number>s 或 <integer>s， “无单位的 0” <length>s 在 calc() 中不被支持。 也就是说，width: calc(0 + 5px); 是无效的， 尽管 width: 0; 和 width: 5px; 都是有效的。

如果在表达式放置的上下文中接受百分比，并且定义为相对于除 <number> 之外的另一种类型， 则 <percentage-token> 被视为该类型。 例如，在 width 属性中，百分比具有 <length> 类型。 只有在该上下文中 <percentage> 值与任何其他类型不兼容时， 百分比才具有 <percentage> 类型。 如果通常不允许在 calc() 中使用百分比， 则在该上下文中包含百分比的 calc() 表达式是无效的。

注意： 注意，<percentage>s 相对于 <number>s， 例如在 opacity， 在 calc() 中不允许。 允许这样做会导致“单位代数”的重大问题 （允许对 <dimension>s 进行乘法/除法）， 到目前为止的每个案例都没有提供任何新功能。 （例如，opacity: 25% 与 opacity: .25 是相同的； 这只是一个微不足道的语法转换。）

注意： 尽管有一些属性中，裸露的 <number> 在使用值时变为 <length> （具体而言，line-height 和 tab-size）， <number>s 在 calc() 中永远不会变为“长度类”。 它们始终保持为 <number>s。

运算符形成子表达式，这些表达式根据其参数获得类型。 为了简化表达式，运算符对接受的类型有一定的限制。 在每个运算符处，检查左右参数的类型是否符合这些限制。 如果兼容，类型按以下所述解析 （以下忽略运算符的优先级规则以简化）：

• 在 + 或 -， 检查两侧是否具有相同的类型， 或一侧是 <number>，另一侧是 <integer>。 如果两侧都是相同类型， 解析为该类型。 如果一侧是 <number>，另一侧是 <integer>， 解析为 <number>。
• 在 *， 检查至少一侧是 <number>。 如果两侧都是 <integer>， 解析为 <integer>。 否则， 解析为另一侧的类型。
• 在 /， 检查右侧是否为 <number>。 如果左侧是 <integer>， 解析为 <number>。 否则， 解析为左侧的类型。

如果运算符未通过上述检查，则表达式无效。 此外，除以零是无效的。这包括既除以字面数零，也包括任何评估为零的数值表达式 （因为纯数值表达式可以在解析时在没有任何附加信息的情况下进行评估）。

注意： 代数简化不会影响 calc() 表达式的有效性或其解析类型。 例如，calc(5px - 5px + 10s) 和 calc(0 * 5px + 10s) 都是无效的， 因为尝试将长度和时间相加。

8.1.3. 计算值

一个 calc() 表达式的计算值是所有组件已计算的表达式。

当百分比在计算值时间未解析时， 它们在 calc() 表达式中也不会被解析， 例如 calc(100% - 100% + 1em) 解析为 calc(1em + 0%)， 而不是 1em。 如果在值的计算中有特殊规则（例如 height 属性）， 这些规则将在 calc() 表达式包含百分比时应用。

考虑到表格单元格和表格元素的宽度和高度计算的复杂性， 涉及百分比的宽度和高度的数学表达式 在表格列、表格列组、表格行、表格行组和表格单元格中 在自动和固定布局表格中 可能会被视为指定了 auto。

8.1.4. 范围检查

在 calc() 中不进行解析时的范围检查， 因此，超出范围的值不会导致声明无效。 然而，表达式的结果值 必须限制在目标上下文允许的范围内。 限制是在尽可能的情况下对 计算值 进行的， 如果计算无法充分简化表达式 以允许范围检查，也会对 使用值 进行限制。 （对 指定值 不进行限制。）

注意： 这要求所有接受 calc() 的上下文定义 它们允许的值为封闭（而非开放）区间。

width: calc(5px - 10px);
width: calc(-5px);
width: 0px;

8.1.5. 序列化

calc() 值的序列化在此级别上是未定义的。

附录 A：IANA 考虑事项

注册 about:invalid URL 方案

本节定义并注册 about:invalid URL， 根据 [RFC6694] 中定义的注册程序进行。

此注册的官方记录可以在 http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtml 找到。

感谢

Giovanni Campagna、Christoph Päper、Keith Rarick、Alex Mogilevsky、Ian Hickson、David Baron、 Edward Welbourne、Boris Zbarsky、Björn Höhrmann 和 Michael Day 的评论和建议 改进了本模块。

安全考虑

本规范没有提出新的安全考虑。

本规范定义了url()函数（<url>）， 允许 CSS 进行网络请求。 根据它们所使用的特性，这些请求可能会暴露用户是否能够访问网络上的资源， 并透露有关其内容的信息 （例如样式表中的规则、图像的大小、字体的度量）。 它们还可以通过 URL 允许数据的外泄。

隐私考虑

本规范引入了暴露用户屏幕大小的单位 （视口百分比长度）， 默认字体大小， 并可能提供一些有关 用户系统上可用字体的信息 （字体相对 长度）。

本规范定义了url()函数（<url>）， 允许 CSS 进行网络请求。 根据它们所使用的特性，这些请求可能会暴露用户是否能够访问网络上的资源， 并透露有关其内容的信息 （例如样式表中的规则、图像的大小、字体的度量）。 它们还可以通过 URL 允许数据的外泄。