CSS 值和单位

每个 CSS 声明都包含一个属性/值对。根据属性的不同，值可以包含单个整数或关键字，也可以包含一系列带有或不带单位的关键字和值。CSS 属性接受一组通用的数据类型——值和单位。以下是大多数这些数据类型的概述。有关更详细的信息，请参阅每个值类型的页面。

文本数据类型

<custom-ident>
预定义关键字作为 <ident>
<string>
url()

文本数据类型可以是 <string>（一系列带引号的字符）或 <ident>（“CSS 标识符”，即不带引号的字符串）。<string> 必须用单引号或双引号括起来。CSS 标识符（在规范中列为 <ident> 或 <custom-ident>）必须不带引号。

在 CSS 规范中，可以由 Web 开发人员定义的值（如关键帧动画、字体系列名称或网格区域）列为 <custom-ident>、<string> 或两者。

当允许带引号和不带引号的用户定义文本值时，规范将列出 <custom-ident> | <string>，这意味着引号是可选的，例如动画名称的情况。

css

@keyframe validIdent {
  /* keyframes go here */
}
@keyframe 'validString' {
  /* keyframes go here */
}

如果某些文本值包含在引号中，则无效。例如，grid-area 的值可以是 <custom-ident>，因此如果我们有一个名为 content 的网格区域，我们将不带引号地使用它。

css

.item {
  grid-area: content;
}

相比之下，作为 <string> 的数据类型（例如 content 属性的字符串值）必须带引号。

css

.item::after {
  content: "This is my content.";
}

虽然通常可以创建任何您想要的名称，包括使用表情符号，但标识符不能为 none、unset、initial 或 inherit，不能以数字或两个连字符开头，并且通常不希望它是任何其他预定义的 CSS 关键字。有关更多详细信息，请参阅 <custom-ident> 和 <string> 参考页面。

预定义关键字值

预定义关键字是由规范为该属性定义的文本值。这些关键字也是 CSS 标识符，因此不带引号使用。

在查看 CSS 规范或 MDN 属性页面中的 CSS 属性值语法时，允许的关键字将以以下形式列出。以下值是 float 允许的预定义关键字值。

left | right | none | inline-start | inline-end

此类值不带引号使用。

css

.box {
  float: left;
}

CSS 全局值

除了作为属性规范一部分的预定义关键字之外，所有 CSS 属性都接受 CSS 全局属性值 initial、inherit、unset、revert 和 revert-layer，它们明确指定了默认行为。

initial: 表示指定为属性初始值的 value。
inherit: 表示元素父元素上该属性的计算值，前提是它被继承。
unset: 根据属性是否被继承，充当inherit或initial。
revert: 将属性重置为其继承值（如果它从其父元素继承）或用户代理样式表（或任何存在的用户样式）中建立的默认值。
revert-layer: 将属性在级联层中的值回滚到 CSS 规则在先前级联层中匹配元素时的属性值。使用此关键字的属性值将重新计算，就好像当前级联层中未在目标元素上指定任何规则一样。

URL

url()类型的 url() 使用函数表示法，它接受一个表示 URL 的<string>。这可以是绝对 URL 或相对 URL。例如，如果要包含背景图像，可以使用以下任一方法。

css

.box {
  background-image: url("images/my-background.png");
}

.box {
  background-image: url("https://www.exammple.com/images/my-background.png");
}

url()的参数可以带引号或不带引号。如果不带引号，则将其解析为<url-token>，这有额外的要求，包括某些字符的转义。有关更多信息，请参阅 url()。

数字数据类型

整数

整数是一个或多个十进制数字，从0到9，例如1024或-55。整数前面可以加上+或-符号，符号和整数之间没有空格。

数字

<number>表示实数，可以有或没有小数点和分数部分，例如0.255、128或-1.2。数字前面也可以加上+或-符号。

尺寸

<dimension>是一个带有单位的<number>，例如45deg、100ms或10px。附加的单位标识符不区分大小写。数字和单位标识符之间永远不会有空格或任何其他字符：即1 cm无效。

CSS 使用尺寸来指定

这些都将在下面的子部分中介绍。

距离单位

在允许距离单位（也称为长度）作为属性值的情况下，将其描述为<length>类型。CSS 中有两种类型的长度：相对长度和绝对长度。相对长度单位相对于其他事物指定长度。

相对长度有两种类型：字体相对长度和视口百分比长度。这两种类型都有两种类型。字体相对长度单位要么是本地字体相对长度，要么是根字体相对长度。视口百分比长度要么相对于视口高度或宽度大小，要么如CSS Containment 模块中所定义的那样，相对于容器。

本地字体相对长度

本地字体相对长度相对于“本地”字体大小或行高，相对于元素本身特征的计算大小指定长度，或者在循环引用（例如em值）的情况下相对于元素的继承值。用于font-size属性或lh值用于line-height属性。例如，em相对于元素上的字体大小，ex相对于元素字体的 x 高度。

单位	相对于
`cap`	元素字体的帽高（大写字母的名义高度）。
`ch`	元素字体中窄字形的平均字符前进量，由“0”（零，U+0030）字形表示。
`em`	元素字体的字体大小。
`ex`	元素字体的 x 高度。
`ic`	元素字体中全角字形的平均字符前进量，由“水”（CJK 水字符，U+6C34）字形表示。
`lh`	元素的行高。

根字体相对长度

根字体相对长度相对于元素的根元素祖先（例如<html>或<SVG>）指定长度。例如，rem相对于根元素上的字体大小，rex是根元素字体的 x 高度。

单位	相对于
`rcap`	根元素字体的帽高（大写字母的名义高度）。
`rch`	根元素字体中窄字形的平均字符前进量，由“0”（零，U+0030）字形表示。
`rem`	根元素字体的字体大小。
`rex`	根元素字体的 x 高度。
`ric`	根元素字体中全角字形的平均字符前进量，由“水”（CJK 水字符，U+6C34）字形表示。
`rlh`	根元素的行高。

视口单位

视口单位长度相对于视口的尺寸指定长度。例如，vw相对于视口的宽度，vh相对于视口的高度。

单位	相对于
`dvh`	动态视口高度的 1%。
`dvw`	动态视口宽度的 1%。
`lvh`	大型视口高度的 1%。
`lvw`	大型视口宽度的 1%。
`svh`	小型视口高度的 1%。
`svw`	小型视口宽度的 1%。
`vb`	根元素块轴上视口大小的 1%。
`vh`	视口高度的 1%。
`vi`	根元素内联轴上视口大小的 1%。
`vmax`	视口较大尺寸的 1%。
`vmin`	视口较小尺寸的 1%。
`vw`	视口宽度的 1%。

容器单位

容器查询长度单位相对于查询容器的尺寸指定长度。例如，cqw相对于查询容器的宽度，cqh相对于查询容器的高度。

单位	相对于
`cqb`	查询容器块大小的 1%
`cqh`	查询容器高度的 1%
`cqi`	查询容器内联大小的 1%
`cqmax`	`cqi`或`cqb`中较大的值
`cqmin`	`cqi`或`cqb`中较小的值
`cqw`	查询容器宽度的 1%

绝对长度单位

绝对长度单位固定为物理长度：英寸或厘米。因此，许多这些单位在输出为固定大小的媒体（如打印）时更有用。例如，mm是物理毫米，是厘米的 1/10。

单位	名称	相当于
`cm`	厘米	1cm = 96px/2.54
`in`	英寸	1in = 2.54cm = 96px
`mm`	毫米	1mm = 1cm 的 1/10
`pc`	皮卡	1pc = 1in 的 1/6
`pt`	磅	1pt = 1in 的 1/72
`px`	像素	1px = 1in 的 1/96
`Q`	四分之一毫米	1Q = 1cm 的 1/40

在包含长度值时，如果长度为0，则不需要单位标识符。否则，单位标识符是必需的，不区分大小写，并且必须紧跟在值的数字部分之后，中间没有空格。

角度单位

角度值由类型<angle>表示，并接受以下值

单位	名称	描述
`deg`	度	一个完整的圆圈有 360 度。
`grad`	梯度	一个完整的圆圈有 400 梯度。
`rad`	弧度	一个完整的圆圈有 2π 弧度。
`turn`	圈	一个完整的圆圈有 1 圈。

时间单位

时间值由类型<time>表示。在包含时间值时，单位标识符（s或ms）是必需的。它接受以下值。

单位	名称	描述
`ms`	毫秒	一秒钟有 1000 毫秒。
`s`	秒

频率单位

频率值由类型<frequency>表示。它接受以下值。

单位	名称	描述
`Hz`	赫兹	表示每秒发生的次数。
`kHz`	千赫兹	千赫兹是 1000 赫兹。

1Hz也可以写成1hz或1HZ，表示每秒一个周期。

弹性单位

弹性单位由类型<flex>表示。它接受以下值。

单位	名称	描述
`fr`	弹性	表示网格容器内的灵活长度

分辨率单位

分辨率单位由类型<resolution>表示。它们通过指示这些点中有多少个适合 CSS 英寸、厘米或像素来表示图形表示（例如屏幕）中单个点的尺寸。它接受以下值

单位	描述
`dpcm`	每厘米点数。
`dpi`	每英寸点数。
`dppx`、`x`	每像素点数。

百分比

<percentage>是一种表示某个其他值的几分之几的类型。

百分比值始终相对于另一个数量，例如长度。每个允许百分比的属性还定义了百分比所指的数量。此数量可以是同一元素的其他属性的值、祖先元素的属性的值、包含块的测量值或其他内容。

例如，如果将框的width指定为百分比，则它指的是框的父元素计算宽度的百分比。

css

.box {
  width: 50%;
}

混合百分比和尺寸

某些属性接受可以是两种类型之一的尺寸，例如<length>或<percentage>。在这种情况下，允许的值在规范中详细说明为组合单元，例如<length-percentage>。其他可能的组合如下

特殊数据类型（在其他规范中定义）

颜色

<color>值指定元素特征的颜色（例如其背景颜色），并在CSS 颜色模块中定义。

图像

<image> 值指定了 CSS 中可以使用所有不同类型的图像，并在 CSS 图像值和替换内容模块中定义。

位置

<position> 类型定义了对象在定位区域内的二维位置，例如容器内的背景图像。此类型被解释为 background-position，因此在 CSS 背景和边框规范中指定。

函数式表示法

函数式表示法是一种值类型，可以表示更复杂的类型或通过 CSS 调用特殊处理。语法以函数名称开头，紧跟着一个左括号 (，然后是表示法的参数，最后是一个右括号 )。函数可以接受多个参数，这些参数的格式类似于 CSS 属性值。

括号内允许使用空格，但可选。（但请参阅有关 min()、max()、minmax() 和 clamp() 函数页面中空格的说明。）

一些旧的函数式表示法，例如 rgb()、rgba()、hsl() 和 hsla() 的旧语法，使用逗号，但逗号通常仅用于分隔列表中的项目。如果使用逗号分隔参数，则逗号前后空格可选。

规范

规范
CSS 值和单位模块级别 4
CSS 颜色模块级别 4
CSS 图像模块级别 3