CSS 的值与单位

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

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

这些值中的大多数在用于打印时比用于屏幕输出时更有用。例如，我们通常不会在屏幕上使用 cm（厘米）。惟一一个你经常使用的值，估计就是 px（像素）。

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

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

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

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

第二个框的宽度设置为 vw（视口宽度）单位。这个值相对于视口宽度，所以 10vw 是视口宽度的 10%。如果你更改浏览器窗口的宽度，那么框的大小应该会更改，但是这个示例使用 嵌入到页面中，所以这将不起作用。要查看实际情况，你必须在打开示例的浏览器选项卡后尝试该示例。

第三个盒子使用 em 单位。这些是相对于字体大小的。我在包含 的元素上设置了一个 1em 的字体大小，它有一个 .wrapper 类。将这个值更改为 1.5em，你将看到所有元素的字体大小都增加了，但是只有最后一项会变宽，因为宽度与字体大小有关。

按照上面的说明操作之后，尝试以其他方式处理这些值，看看你将收获什么。

em 和 rem 是你在从框到文本调整大小时最常遇到的两个相对长度。了解这些方法是如何工作的以及它们之间的区别是很有意义的，尤其是当你开始学习更复杂的主题时，比如样式化文本或 CSS 布局。下面的示例提供了一个演示。

HTML 是一组嵌套的列表——我们总共有三个列表，并且两个示例都有相同的 HTML。唯一的区别是第一个类具有 em，第二个类具有 rem。

首先，我们将 16px 设置为 元素的字体大小。

概括地说，在排版属性中 em 单位的意思是“父元素的字体大小”。带有 ems 类的 内的 元素从它们的父元素中获取大小。因此，每一个连续的嵌套级别都会逐渐变大，因为每个嵌套的字体大小都被设置为 1.3em——是其父嵌套字体大小的 1.3 倍。

概括地说，rem 单位的意思是“根元素的字体大小”。（“根 em”的 rem 标准。） 内的 元素和一个 rems 类从根元素（）中获取它们的大小。这意味着每一个连续的嵌套层都不会不断变大。

但是，如果你在 CSS 中更改 字体大小，你将看到所有其他相关内容都发生了更改，包括 rem 和 em 大小的文本。