CSS 值和单位

什么是 CSS 的值？

在 CSS 规范和 MDN 的属性页上，你将能够发现值类型（value type）的存在，它们被尖括号（<、>）包围，如 或 。当你看到值类型 对特定属性有效时，这意味着你可以使用任何有效的颜色作为该属性的值，如 参考页面所列。

有时值类型和属性可能具有相同或相似的名称——例如 color 属性和 数据类型。你可以使用尖括号来区分每种情况下你所研究的具体对象。HTML 元素也使用尖括号，但从上下文应该能清楚你所查看的是哪一个。如果你不确定，可以尝试在 MDN 上搜索它。

备注：你还将看到被称为数据类型（data type）的 CSS 值。这些术语基本上是可以互换的——当你在 CSS 中看到被称为数据类型的东西时，它实际上只是另一种表达值类型的方式。术语值（value）指的是你所选择的值类型所支持的任何特定表达式。

在下面的例子中，我们使用关键字设置标题的颜色，使用 rgb() 函数设置背景：

cssh1 {

color: black;

background-color: rgb(197 93 161);

}

在 CSS 中，值类型是一种定义可使用的值的集合的方式。这意味着，如果你看到的 是有效的，那么你就不需要纠结要使用哪种颜色值类型——关键字、十六进制值或者 rgb() 函数。只要你的浏览器支持，你可以使用任意可用的 值。MDN 上每个值类型的页面都将提供有关浏览器支持的信息。例如，如果你查看 页面，你会看到浏览器兼容性部分列出了不同类型的颜色值以及对它们的支持情况。

让我们来看看你可能经常遇到的一些值和单位类型，并提供一些示例，以便你尝试使用各种值的可能性。

数值、长度和百分比

你可能会发现自己在 CSS 中使用了各种数值数据类型。以下全部归类为数值：

数据类型

描述

是一个整数，比如 1024 或 -55。

表示一个十进制数——它可能有小数部分，也可能没有。例如 0.255、128 或 -1.2。

是一个 。它有一个附加的单位，例如 45deg、5s 或 10px。 是一个伞形类别，包括

、、 和

类型。

表示一些其他值的一部分，例如 50%。百分比值总是相对于另一个量。例如，一个元素的长度相对于其父元素的长度。

长度

最常见的数字类型是 ，例如 10px（像素）或 30em。CSS 中有两种类型的长度——相对长度和绝对长度。重要的是要知道它们之间的区别，以便理解它们控制的元素将变得有多大。

绝对长度单位

以下都是绝对长度单位——它们与其他任何东西都没有关系，通常被认为总是相同的大小。

单位

名称

等价换算

cm

厘米

1cm = 37.8px

mm

毫米

1mm = 3.78px

Q

四分之一毫米

1Q = 0.945px = 0.25mm

in

英寸

1in = 96px = 2.54cm

pc

派卡

1pc = 16px ≈ 0.4233cm

pt

磅

1pt = 4/3 px ≈ 0.3527mm

px

像素

1px ≈ 0.2646mm

这些单位大多在用于印刷而非屏幕输出时更有用。例如，我们通常不在屏幕上使用 cm（厘米）。你唯一应该常用的值是 px（像素） 。

相对长度单位

相对长度单位是相对于其他某些东西的。例如：

em 相对于本元素的字体大小，或者在用于 font-size 时相对于父元素的字体大小。rem 相对于根元素的字体大小。

vh 和 vw 分别相对于视口的高度和宽度。

使用相对单位的好处是，通过一些精心的规划，你可以使文本或其他元素的大小相对于页面上的任何指定的东西进行缩放。要获取可用的相对单位的完整列表，请参阅 类型的参考页面。

在本节中，我们将探讨一些最常见的相对单位。

探索一个例子

在下面的示例中，你可以看到一些相对长度单位和绝对长度单位的行为。第一个盒子以像素为单位设置 width。作为一个绝对单位，无论其他地方如何变化，这个宽度将保持不变。

第二个盒子的宽度设置为 vw（视口宽度）单位。这个值相对于视口宽度，所以 10vw 是视口宽度的 10%。如果你更改浏览器窗口的宽度，那么框的大小应该会更改。但是，这个示例使用