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

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

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

相对长度单位相对于其他一些东西，比如父元素的字体大小，或者视图端口的大小。使用相对单位的好处是，经过一些仔细的规划，你可以使文本或其他元素的大小与页面上的其他内容相对应。下表列出了 web 开发中一些最有用的单位。

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

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

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

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

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

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

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

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

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

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