如何在CSS中使用常用单位

作为 Write for DOnations 计划的一部分，作者选择了 Diversity in Tech Fund 来接受捐赠。

介绍

使用 CSS 设置 HTML 样式时，有很多尺寸单位可供选择。这些单位有助于确定文本的大小、容器的宽度或列之间的间距。每个不同的单元都具有对开发人员和网站设计有价值的功能优势。了解哪个单元最适合某种情况将帮助您编写灵活且易于访问的网站。

在本教程中，您将了解像素 (px)、百分比 (%)、em 和 rem 单位。您将结合多个属性使用这些单位，包括 font-size、padding、border、margin、width 和 [X134X ] 了解每个单元的差异和优势。

先决条件

在本地计算机上保存为 index.html 的 HTML 文件，您可以从文本编辑器和选择的 Web 浏览器访问该文件。要开始使用，请查看我们的如何设置您的 HTML 项目教程，并按照如何使用和理解 HTML 元素获取有关如何在浏览器中查看 HTML 的说明。如果您是 HTML 新手，请尝试如何用 HTML 构建网站系列。
CSS盒子模型的知识，您可以在如何使用CSS中的盒子模型教程中找到。
使用选择器通过 CSS 查找和应用样式到 HTML 元素的经验。有关这方面的更多信息，请查看如何选择 HTML 元素以使用 CSS 设置样式的教程。
CSS字体属性的知识，您可以通过阅读如何在CSS中使用字体、大小和颜色设置文本元素样式来获得。

设置 HTML 和 CSS

在第一部分中，您将设置 HTML 作为整个教程中所有样式的基础。此外，您将创建用于编写教程样式的 CSS 文件。

首先，在文本编辑器中打开 index.html 并将以下 HTML 添加到文件中：

索引.html

<!doctype html>
<html>
    <head>
    </head>
    <body>
    </body>
</html>

接下来在 <head> 标记中，您将添加一个 meta 标记来声明此 HTML 中使用的字符集、页面标题、一个 meta 标记定义如何页面应该在移动设备上处理，以及要加载的 CSS 文件，其中包括来自 Google Fonts 的字体，以及您将在下一节中创建的 styles.css 文件。

<head> 标签的新增内容在以下代码块中突出显示。随着代码的添加和更改，您将在整个教程中找到此名称：

索引.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>CSS Units</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
    </body>
</html>

现在 <head> 信息已经到位，下一步是添加您将在 <body> 标记中设置样式的内容。此内容摘自 Lewis Carroll 的 爱丽丝梦游仙境 ，其中爱丽丝正在与毛毛虫谈论尺寸。内容包含在带有标题的 <figure> 元素和包含摘录的 <blockquote> 元素中。 <figcaption> 元素结束内容，提供对原始文学作品的引用。此外，对话框中还有一些 <span> 标签，您可以设置它们的样式以强调和效果。

将以下代码中突出显示的部分添加到您的 index.html 文件中：

索引.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>CSS Units</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
        <figure>
            <h3>Advice from a Caterpillar</h3>
            <blockquote>
                <p>The Caterpillar was the first to speak.</p>
                <p>“What <span>size</span> do you want to be?” it asked.</p>
                <p>“Oh, I’m not particular as to <span>size</span>,” Alice hastily replied; “only one doesn't like changing so often, <span>you know</span>.”</p>
            </blockquote>
            <figcaption>Excerpt from <cite>Alice’s Adventures in Wonderland</cite> by Lewis Carroll.</figcaption>
        </figure>
    </body>
</html>

为样式准备 HTML 的最后一步是将 class 属性和值应用于页面内容的 HTML 元素。您将在 CSS 中使用类选择器来定位和应用样式。使用的类名描述了每个元素的任务和意图：

索引.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>CSS Units</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link href="https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
    </head>
    <body>
        <figure class="excerpt">
            <h3 class="title">Advice from a Caterpillar</h3>
            <blockquote class="quote">
                <p class="quote-text">The Caterpillar was the first to speak.</p>
                <p class="quote-text">“What <span class="large">size</span> do you want to be?” it asked.</p>
                <p class="quote-text">“Oh, I’m not particular as to <span class="large">size</span>,” Alice hastily replied; “only one doesn't like changing so often, <span class="small">you know</span>.”</p>
            </blockquote>
            <figcaption class="citation">Excerpt from <cite>Alice’s Adventures in Wonderland</cite> by Lewis Carroll.</figcaption>
        </figure>
    </body>
</html>

请务必将这些更改保存到您的 index.html 文件中，然后在您的网络浏览器中打开该文件。如下图所示，浏览器默认应用的样式已经很多。此外，谷歌字体中的字体还不可见，因为它没有在 CSS 中定义，尽管它包含在 <head> 标记中。

最后，创建 styles.css 文件并在编辑器中打开它。这将是您在本教程的其余部分中使用的文件。将 body 选择器上的字体设置为具有 font-family: 'Averia Serif Libre', serif;。这会将字体应用于页面上的所有元素：

样式.css

body {
    font-family: 'Averia Serif Libre', serif;
}

保存对 styles.css 的更改，然后在浏览器中重新加载 index.html。内容现在将使用看起来像旧印刷书籍的字体，如下图所示：

在本节中，您将使用在 CSS 中使用单元所需的所有内容和标记来设置 HTML。您还创建了 styles.css 文件并添加了用于所有内容的新字体。在下一节中，您将使用 px 单元开始将样式应用于内容。

使用像素单位 `px`

在本节中，您将专注于使用像素 (px) 单位对初始样式进行编码。 px 是网络上著名的单位。与本教程中介绍的其他单位不同，px 单位是基于物理的单位，因为它的大小由设备显示屏的单个像素的物理大小决定。

在您的文本编辑器中打开 styles.css 并使用 .element 为 <figure> 元素的 class 创建一个类选择器。在此选择器块中，您将定义布局和美学样式，其中 margin 属性设置为 20px auto，padding 设置为 20px，[X145X ] 设置为 1px solid black，480px 的 max-width，最后将 box-sizing 属性设置为 border-box：

样式.css

body {
    font-family: 'Averia Serif Libre', serif;
}

.excerpt {
    margin: 20px auto;
    padding: 20px;
    border: 1px solid black;
    max-width: 480px;
    box-sizing: border-box;
}

margin 将 20px 应用于容器的顶部和底部，而 auto 将容器设置为在声明 width 值后水平居中。接下来，padding 属性在容器内部的每一侧提供 20px 的空间。然后，border: 1px solid black; 在整个容器周围应用 1px 厚黑色边框作为内容的定义周长。 max-width 允许当屏幕小于 480px 时容器的宽度是灵活的，但一旦容器为 480px 宽时就停止增长。最后，box-sizing: border-box;改变容器的盒子模型，保证最大宽度为480px。

将这些添加保存到您的 styles.css 文件中，然后跳转到您的浏览器并刷新 index.html。容器内部顶部会有额外的空间，这是来自 .title 元素的默认值。检查下图，看看它在浏览器中的样子：

接下来，返回编辑器中的 styles.css 并为 <h3> 元素创建一个类选择器，其中 class 值为 title。当前内容具有浏览器的默认值 font-size、font-weight 和 margin。首先将font-size改为20px，比浏览器默认大小大一点。然后添加一个值为 0 0 10px 的 margin 属性，它将在顶部应用 0 的边距，然后在右侧应用 0 的边距和左边，最后是标题底部的 10px 边距。 CSS中值为0时不需要单位：

样式.css

...
.title {
    font-size: 20px;
    margin: 0 0 10px;
}

<blockquote> 内容以浏览器默认 margin 值左右缩进。针对本设计的需要，可以去掉margin。创建一个以 .quote 为目标的类选择器，并为其提供一个值为 0 的 margin 属性。这将允许内容扩展到 <figure> 容器的完整内容宽度：

样式.css

...
.quote {
    margin: 0;
}

将更改保存到 styles.css 文件并返回浏览器，然后刷新 index.html 文件。 .title 现在会大一点，上面的间隙要小得多。引用内容现在也被扩展以填充空间。查看以下图片，了解浏览器中将发生的变化：

在文本编辑器中返回 styles.css。由于 blockquote 内容是 <figure> 的主要焦点，因此通过定位 quote-text 并应用 24px 的 font-size 使其脱颖而出]。然后，通过使用 margin 简写 10px 0 将顶部和底部 margin 设置为 10px，在每行之间进行一个狭窄的中断。这会将顶部和底部设置为 10px，将右侧和左侧设置为 0 的值：

样式.css

...
.quote-text {
    font-size: 24px;
    margin: 10px 0;
}

接下来，要应用受摘录启发的视觉强调，将 <span> 与 large 的 class 属性作为目标，并设置 32px 的 font-size ]：

样式.css

...
.large {
    font-size: 32px;
}

设置 .large 文本后，创建一个以 .small 为目标的类选择器，并为其提供值为 20px 的 font-size 属性：

样式.css

...
.small {
    font-size: 20px;
}

将这些更改保存到您的 styles.css 文件并在浏览器中刷新 index.html。摘录的内容会变大，并且会更加紧密。此外，“size”这个词会显得比主要文本大，而“you know”这个词会显得更小一些。下图显示了它在浏览器中的外观：

对于本节的最后一个样式，请返回文本编辑器中的 styles.css 文件。创建一个以应用于 <figcaption> 元素的 citation 类为目标的类选择器。此内容描述了 <figure> 的内容，因此在视觉上它不应该那么突出，需要与引用区分开来。

添加一个值为 1px solid #ccc 的 border-top 为其赋予浅灰色边框。然后应用 margin-top: 20px; 和 padding-top: 20px; 设置边框与引用的最后一行和引用的第一行等距。这将提供所需的视觉分离。最后，为了不强调引用的内容，将 color 属性的值设置为 #555 和 14px 的 font-size。与其他黑色文本相比，这将使内容变得更浅灰色，从而使内容不那么引人注目：

样式.css

...
.citation {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 20px;
    color: #555;
    font-size: 14px;
}

将此添加保存到编辑器中的 styles.css 文件中。然后，返回浏览器并刷新 index.html 页面以查看更改，如下图所示：

px 最初是一个由计算机屏幕的物理像素定义的单位。这意味着一个 10px 宽和 10px 高的框在它显示的计算机屏幕上使用了 100 像素。对于高分辨率显示器，像素要小得多，因此像素值通常会翻倍，这意味着 1px 在屏幕上占据 4 个像素。这是一个像素大小的软件操作。在模仿非本地屏幕分辨率的标准分辨率显示器上可能会出现像素加倍，这意味着分辨率高于或低于屏幕上的物理像素数。

由于设备上的像素加倍和用户偏好，px 不是理想的度量单位。虽然它是一个物理单元，但它可以由计算机操纵，并可能导致元素显得太小或变得模糊。 亚像素渲染是指计算机遇到涉及小数点的像素计算并在像素之间混合颜色以应用小于1px的值，从而导致边缘模糊的术语。

在本节中，您使用 px 单位将属性值设置为页面内容。您了解到 px 单位是一个物理单位，尽管计算机可以操纵该值。在下一节中，您将在可能的情况下重构代码以使用百分比值。

使用百分比单位 `%`

在本节中，您将使用百分比单位 (%) 将维度值应用于 HTML 页面上的元素。与 px 单位不同，百分比单位是相对单位，不依赖于屏幕的物理属性。相反，百分比单位为浏览器提供了它必须计算以产生像素值的值关系。与其他相对单位一样，百分比单位比像素单位具有优势，它可以根据许多因素进行缩放，包括用户的个人浏览器设置。这使得相对单位有利于可访问性，并为用户交互和使用内容提供了最佳选择。

百分比单位最有用的应用之一是作为 width 属性值。在文本编辑器中打开您的 styles.css 文件并添加一个 width: 80%，然后出于组织目的在 max-width 属性上方添加该行：

样式.css

...
.excerpt {
    margin: 20px auto;
    padding: 20px;
    border: 1px solid black;
    width: 80%;
    max-width: 480px;
    box-sizing: border-box;
}
...

这是一个强大的组合，因为容器将是其父级宽度的 80% of，直到它达到 480 像素的宽度，此时它将停止增长。如果您熟悉响应式网页设计，那么大部分概念都是基于这种组合的。 80% 值还允许容器在左右有间距，无论屏幕大小的宽度如何。

既然您已经使用了百分比单位，请尝试在更多地方应用它，看看它是如何工作的。首先将 .excerpt 选择器的 margin 和 padding 像素值换成百分比。这需要一个您将在本教程的其余部分中使用的公式：size / context = result。

在这种情况下，对于 margin 和 padding 上的 20px 值，size 是 20。由于 margin 和 padding 上的百分比单位是宽度的百分比，因此 max-width 值可以帮助确定近似的 context。这使得必要的方程 20/480 得到 0.041666667。在处理百分比时，结果在使用前必须始终乘以100，使得最终值4.1666667%。将 .excerpt 选择器中的 20px 值改为 4.1666667%，如代码块中突出显示的部分所示：

样式.css

...
.excerpt {
    margin: 4.1666667% auto;
    padding: 4.1666667%;
    border: 1px solid black;
    width: 80%;
    max-width: 480px;
    box-sizing: border-box;
}
...

将更改保存到 styles.css 并在浏览器中重新加载 index.html。尝试更改浏览器窗口宽度的大小，并观察 padding 值如何在 .excerpt 容器达到其 max-width 之后继续增长。有关此效果的实际演示，请参见以下动画。

这不太可能是预期的效果，但最好了解并查看哪些属性最适合百分比单位。

在编辑器中返回 styles.css 文件并将 4.1666667% 恢复为 20px：

样式.css

...
.excerpt {
    margin: 20px auto;
    padding: 20px;
    border: 1px solid black;
    width: 80%;
    max-width: 480px;
    box-sizing: border-box;
}
...

百分比单位可能非常有用的下一个区域是 font-size 值。在 font-size 属性上使用百分比使用相同的公式来查找值。转到 styles.css 文档中的 .title 选择器块，font-size 是 20px。从公式size / context = result，这个20px就是size。本场景中的context是浏览器默认的文档font-size，即16px。那么公式是 20 / 16，因为这是一个百分比，所以 result 必须乘以 100，得到最终值为 125% 。添加 125% 值代替 20px。在代码中添加注释以解释预期大小会很有帮助：

样式.css

...
.title {
    font-size: 125%; /* target size: 20px */
    margin: 0 0 10px;
}
...

接下来，将相同的公式应用于 .quote-text 选择器，它的 font-size 为 24px。该值的结果为 150%，因为 24 比 16 大 150%。将此添加到编辑器中的 styles.css 文件中：

样式.css

...
.quote-text {
    font-size: 150%; /* target size: 24px */
    margin: 10px 0;
}
...

接下来，要将百分比值应用于 .large 和 .small 选择器，需要了解 context 值在公式中的变化方式。浏览器默认的 font-size 是 16px，但 .large 和 .small 都只出现在具有 quote-text 类的元素内部。这意味着它们的上下文不再是 16px，而是 24px。 .large 的当前 font-size 是 32px，它是 16px 大小的两倍通常意味着 font-size 将是 200%。由于 context 已经改变，那将是双 24 而不是 16。因此，适当的公式需要为 32 / 24，得出 1.333333333。

取结果并乘以 100，然后随意将小数位四舍五入到 133.3% 以获得新的 font-size 值：

样式.css

...
.large {
    font-size: 133.3%; /* target size: 32px */
}
...

.small选择器和.large的情况类似，不再是16的因子，而是24。为此，公式为 20 / 24，然后乘以 100。结果为 83.3%：

样式.css

...
.small {
    font-size: 83.3%; /* target size: 20px */
}
...

最后，将相同的公式应用于 .citation 选择器的 font-size。由于此容器返回 16 的默认 font-size，因此等式现在为 14 / 16。将 result 乘以 100 后，最终值为 87.5%：

样式.css

...
.citation {
    border-top: 1px solid #ccc;
    margin-top: 20px;
    padding-top: 20px;
    color: #555;
    font-size: 87.5%; /* target size: 14px */
}

在文本编辑器中保存对 styles.css 的更改，然后在浏览器中重新加载 index.html。您会发现 font-size 值的像素版本和百分比版本之间没有区别。然而，从可访问性的角度来看，这更加通用，因为操作系统和浏览器为用户提供了更改默认 font-size 的工具。使用像百分比这样的相对单位可以让 font-size 根据用户的偏好按比例缩放。

在本节中，您使用百分比单位使 padding、margin、font-size 和 width 属性相对。您了解了 font-size 如何相对于父元素的 font-size 以及计算所需比率的公式。您还了解到百分比值并不总是最佳选择，例如边框宽度值。在下一节中，您将利用百分比单位学到的知识并将其应用到更通用的 em 单位中。

使用 `em` 单元

在本节中，您将重构 CSS 以使用 em 单位。与百分比单位一样，em 单位是相对单位，但与百分比的基数不同，它有一个更常见的基数，不同于 width 或 font-size。 em 与元素的 font-size 或继承的 font-size 完全相关。例如，浏览器中默认的 font-size 是 16px，使得 1em 等价于 16px。从百分比单位来看，1em 类似于 font-size: 100%;；但是，如果将 width 设置为 1em，则计算出的 width 将是 16px 而不是完整的可用宽度。

注意： em 单位有几种方式可能会有点混乱。第一个是关于印刷排版，它也有一个 em 单位。这是基于字体中小写“m”字符的大小。 web em 单元基于 font-size 值。第二个需要注意的地方是还有一个 <em> HTML 元素。该元素与 em 单位无关，而是“emphasis”的缩写，因为它用于斜体和强调文本。

要开始使用 em 单元，请在文本编辑器中打开 styles.css。

由于 em 仅与 font-size 相关，因此它可以用于比百分比单位更可靠的属性。转到 .excerpt 选择器块并使用公式 size / context = result，其中 context 是 16。将此应用于 margin、padding、border 和 max-width 属性的值：

样式.css

...
.excerpt {
    margin: 1.25em auto;
    padding: 1.25em;
    border: 0.0625em solid black;
    width: 80%;
    max-width: 30em;
    box-sizing: border-box;
}
...

与百分比公式不同，result 不需要乘以 100。相反，取结果并在末尾添加 em 单位。对于 margin 和 padding 上的 20px，方程 20 / 16 得出 1.25em。对于1px的border厚度，表示1 / 16，即0.0625em。当处理 1px 的值时，是否需要缩放厚度取决于您。如果不需要，请随意将其保留为 1px。最后，480px 的 max-width 变为 480 / 16，结果为 30em。

将这些更改保存到 styles.css 并在浏览器中重新加载 index.html。不会有视觉上的变化，因为这些值与像素值相同。

接下来，转到编辑器中 styles.css 中的 .title 选择器。从上一节看，font-size 的值为 125%。由于 em 的公式与百分比单位的公式相同，除了乘以 100，您可以改为除以返回小数点。这意味着 font-size 值将从 125% 变为 1.25em。由于 em 值由给定元素的 font-size 定义，因此 em 的每个其他实例都已更改。这意味着 1em 现在等同于 1.25em 并且 .title 选择器内 em 的所有其他使用都与 font-size 相关：

样式.css

...
.title {
    font-size: 1.25em; /* target size: 20px */
    margin: 0 0 10px;
}
...

通过将 em 值应用于 margin，您可以在实践中看到这一点。此处，下边距为 10px。由于 10px 是 20px 大小的一半，并且 1em 等于 font-size 的值，因此 0.5em 将始终为font-size 的一半。您可以在 margin 属性中将 10px 替换为 0.5em。这里的好处是，如果设计发生变化，需要增加 font-size，比例保持不变，底部边距始终为 font-size 值的一半：

样式.css

...
.title {
    font-size: 1.25em; /* target size: 20px */
    margin: 0 0 0.5em; /* target size: 10px */
}
...

将 em 的概念应用到 .quote-text 和 <span> 大小调整类将需要更多地使用该等式。在 font-size 上使用 size / context = result 公式，其中预期值等效于 24px。这导致值 1.5em：

样式.css

...
.quote-text {
    font-size: 1.5em; /* target size: 24px */
    margin: 10px 0;
}
...

无论 font-size 是 em、百分比还是像素，font-size 都定义了 1em 的大小。这意味着公式的 context 现在等于 24px 以将相同的公式应用于 .quote-text 的 margin 和 .large 和.small 类，因为它们在 .quote-text 元素内部使用：

样式.css

...
.quote-text {
    font-size: 1.5em; /* target size: 24px */
    margin: 0.41667em 0; /* target size: 24px */
}

.large {
    font-size: 1.333em; /* target size: 32px */
}

.small {
    font-size: 0.8333em; /* target size: 20px */
}
...

当你做这些等式时，请随意四舍五入到你喜欢的小数点。

最后，将 em 值应用于 .citation 选择器。首先将 font-size 设置为 0.875em，这将保持其大小为 14px。即使 font-size 属性位于选择器块的底部，它仍然确定选择器块中所有其他属性的 1em 的值。这意味着所有其他属性的 context 是 14 而不是 16。如果四舍五入到最接近的千分之一，border 上的 1px 厚度将变为 0.071428571em 或 0.071em。反过来，20px 的 padding 和 margin 值将在四舍五入时变为 1.428571429em 或 1.43em：

样式.css

...
.citation {
    border-top: 0.071em solid #ccc;  /* target size: 1px */
    margin-top: 1.43em; /* target size: 20px */
    padding-top: 1.43em; /* target size: 20px */
    color: #555;
    font-size: 0.875em; /* target size: 14px */
}

在继续进行最后一部分之前，请务必将您的更改保存到 styles.css。

在本节中，您了解了 em 单位以及它如何基于元素的 font-size。与百分比单位不同，em 可以可预测地应用于更多属性，并提供一种方法使属性彼此成比例地变化。在最后一节中，您将了解 em 单元的变体：rem。

使用 `rem` 单元

在最后一节中，您将使用 rem 单位，它与 em 单位很接近。 rem 中的“R”代表 root 元素，它是网页的最顶层元素，最有可能是 <html> 或 <body>。其中 em 值可以根据 font-size 值改变，rem 具有基于根元素的 font-size 的一致大小，默认为 [X159X ]。这使得方程具有恒定且可预测的结果，同时具有 em 的可扩展优势。

要开始使用 rem 值，请在文本编辑器中打开 styles.css 并转到 .excerpt 选择器。由于使用 16px 的默认 font-size 将所有值设置为 em，因此这些值都可以从 em 更改为 rem没有任何影响。这里的优点也是，如果一个 font-size 被添加到这个选择器或者父容器的 font-size 被改变，这些值不会改变，因为它们现在基于根font-size：

样式.css

...
.excerpt {
    margin: 1.25rem auto;
    padding: 1.25rem;
    border: 0.0625rem solid black;
    width: 80%;
    max-width: 30rem;
    box-sizing: border-box;
}
...

接下来，移动到 styles.css 中的 .title 选择器，并将 font-size 更改为 rem。由于此选择器上的 em 已使用默认 font-size 计算，因此无需进行其他更改。对于 margin，您可以将其保留为 em 值，它将继续按 font-size 的比例调整自身大小：

样式.css

...
.title {
    font-size: 1.25rem; /* target size: 20px */
    margin: 0 0 0.5em; /* target size: 10px */
}
...

请务必将更改保存到 styles.css。此时，尚未进行任何视觉更改来改变 index.html 在浏览器中的显示方式，但定期检查总是好的。继续并返回浏览器并刷新 index.html 以验证视觉上没有任何变化。

在文本编辑器中返回 styles.css，然后转到 .quote-text 选择器。此处的 font-size 已经基于 16px 上下文设置，因此单位可以从 em 更改为 rem 而无需进一步调整。然而，这里的 margin 并不打算与 .quote-text font-size 成比例，而是与根 font-size 成比例。这意味着计算 10 / 16 以获得与根 font-size 的恒定关系，使 margin 值为 0.625rem：

样式.css

...
.quote-text {
    font-size: 1.5rem;
    margin: 0.625rem 0;
}
...

.large 和 .small 选择器 font-size 属性可以保留为 em 值，因为它们提供了与 font-size 成比例的大小。 X163X]。将这些值更改为更容易理解的值可能是值得的，尽管它会稍微改变设计。将 .large font-size 更改为 1.5em 并将 .small font-size 更改为 0.875em。这将改变大小，但现在读取类似于 .large 的 150% 和 .small 的 75%：

样式.css

...
.large {
    font-size: 1.5em;
}

.small {
    font-size: 0.75em;
}
...

将这些更改保存到 styles.css 并在浏览器中刷新 index.html。使用这些选择器的文本大小将呈现如下图所示。

接下来，调整 .citation 选择器以在所有属性上使用 rem 而不是 em。由于 border-top、margin-top 和 padding-top 都计算为 font-size 等效于 14px，因此您需要重新计算每个16px 的根 font-size。这将使 1px border-top 厚度为 1 / 16 或 0.0625rem。那么 margin-top 和 padding-top 的 20px 期望值将是 20 / 16，这将导致 1.25rem。最后，由于 font-size 已经基于默认的 16px 值，因此 em 可以更改为 rem：

样式.css

...
.citation {
    border-top: 0.0625rem solid #ccc;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    color: #555;
    font-size: 0.875rem;
}

将您的更改保存到 styles.css 并通过在浏览器中刷新页面来验证 index.html 中没有视觉变化。

最后，可以使用 :root 选择器并更改 font-size 值来更改根 font-size。这会将 1rem 的定义更改为您希望尝试的任何值。

打开您的 styles.css 文件并在顶部添加一个 :root 选择器，然后将 font-size 设置为 20px：

样式.css

:root{
    font-size: 20px;
}

body {
    font-family: 'Averia Serif Libre', serif;
}
...

将此更改保存到 styles.css，然后返回浏览器并刷新 index.html。下图显示了它在浏览器中的外观。

你们所有的款式都会变大一点。如果提供可访问性工具或对网站进行广泛调整，这将非常有用。建议保持默认的 16px 尺寸，因为它更常见，但如果您要更改尺寸，最好是更大而不是更小。这是元素使用的 font-size，较小的内容或缺少定义大小的内容比较大的内容更难访问。

在本节中，您在多个场景中使用了 rem 值，并了解了在 em 和 rem 旁边使用的有用之处。您还了解了 :root 选择器以及如何使用它来定位默认的 font-size。

结论

这四个单位，像素 (px)、百分比 (%)、em 和 rem，是网络上最常见的一些单位. 他们每个人都有自己的优势，了解他们如何工作和协同工作将帮助您确定最适合您需求的情况。您了解到像素单位是基于可以由计算机操作的物理屏幕属性。百分比单位因基值而异，但其最大优势是用作 width 时。 em 值通过元素的 font-size 的公共基线提供更多控制，允许在相关属性之间按比例调整大小。最后，rem 利用了 em 的优点，但将值设置为页面根元素的全局 font-size。

如果您想阅读更多 CSS 教程，请尝试如何使用 CSS 设置 HTML 样式系列中的其他教程。

如何在CSS中使用常用单位

介绍

先决条件

设置 HTML 和 CSS

使用像素单位 px

使用百分比单位 %

使用 em 单元

使用 rem 单元

结论

使用像素单位 `px`

使用百分比单位 `%`

使用 `em` 单元

使用 `rem` 单元