计算值：超过眼睛不超过眼睛-css教程-PHP中文网

首页

web前端

css教程

计算值：超过眼睛不超过眼睛

Christopher Nolan

Apr 03, 2025 am 09:29 AM

Computed Values: More Than Meets the Eye

前端开发者离不开浏览器开发者工具。本文将深入探讨开发者工具中的“计算”选项卡，它虽然不起眼，却能揭示许多重要信息，例如相对 CSS 值是如何解析的。我们还将了解继承如何在浏览器的样式计算过程中发挥作用。

“计算”选项卡中的内容至关重要，因为它显示了浏览器实际用于渲染网站的值。如果元素的样式与预期不符，“计算”选项卡可以帮助您理解原因。

如果您习惯使用“样式”选项卡（Firefox 中称为“规则”），您可能想知道它与“计算”选项卡有何不同。它们都显示应用于元素的样式。答案是：“计算”选项卡显示按字母顺序排列的已解析样式列表，其中包括样式表中声明的样式、继承的样式以及浏览器的默认样式。

另一方面，“样式”选项卡精确地显示所选元素的规则集，如同编写时的样子。因此，“样式”选项卡可能显示类似 .subhead {font-size: 75%} 的内容，而“计算”选项卡将显示实际字体大小，或 70% 当前解析后的值。例如，上面显示的渲染文本的实际字体大小为 13.2px。

接下来，让我们简要回顾一下继承和级联的概念，这是得出“计算”选项卡中计算值的两个重要因素。

继承和级联速成课程

CSS 代表层叠样式表，而“层叠”这个词非常重要——级联的行为方式是理解 CSS 的关键。

MDN

级联值得关注，因为它代表 CSS 中的“C”。它是用于解决文档不同样式声明源之间冲突的机制。

例如，假设一个样式表两次定义 div 的宽度：

<code>div {
  width: 65vw;
}
 
/* 在后面的某个位置 */
div {
  width: 85vw;
}</code>

在此示例中，第二个宽度获胜，因为它最后声明。第一个宽度仍然可以使用 !important 获胜，但这实际上是通过蛮力破坏级联。关键是级联算法确定哪些样式应用于每个元素，并按预定顺序对其进行优先级排序以确定一个值。

级联适用于显式设置的属性，无论是浏览器、Web 开发人员还是用户设置的。当级联的输出为空时，继承就发挥作用了。发生这种情况时，元素父元素上属性的计算值将作为该属性的自身值被提取。例如，如果您为元素指定颜色，则如果您没有指定子元素的颜色，所有子元素都将继承该颜色。

在我们继续之前，我们应该熟悉与继承相关的四个关键属性值。我们将在整篇文章中使用它们。

initial

在 HTML 文档中，DOM 树的最高级别是元素，当我们在元素上使用 initial 关键字时，例如……

……该元素的文本颜色为黑色，即使元素设置为绿色。<div> 选择器具有更高的特异性，但是我们感兴趣的是为什么 <code>initial 转换为黑色。

简单来说，此关键字根据其定义表（在 CSS 规范中）设置属性的默认值。在这种情况下，黑色恰好是浏览器对初始颜色值的实现。

我在文章结尾提到，您可以通过查看 MDN 上的页面来了解属性是否默认继承。您也可以通过这种方式找到任何属性的初始值。

inherit

对于非继承属性，此关键字强制继承。在下面的示例中，<p></p> 元素具有实心红色边框。border 属性不是默认继承的，但是我们可以通过在 border 属性上使用 inherit 关键字来告诉我们的

 继承在 <p></p> 元素上声明的相同红色边框：
unset
如果属性是继承的，unset 将解析为继承值。否则，将使用初始值。这基本上意味着 unset 根据属性是否继承来重置属性。这是一个演示，它切换 unset 以显示其对具有不同特异性级别的元素的影响。
revert
如果没有在元素上设置 CSS 属性，那么它是否会获得任何样式？当然。它使用浏览器的默认样式。
例如，<span></span> 元素的 display 属性的初始值为 inline，但我们可以在样式表中将其指定为 block。使用以下演示中的按钮在 <span></span> 元素的 display 和 color 属性上切换 revert：
<span></span> 正确地恢复为内联元素，但是等等！您是否注意到 <span></span> 的颜色变为绿色而不是浏览器的默认黑色值？这是因为 revert 允许继承。它将追溯到浏览器的默认值以设置颜色，但是由于我们在 <p></p> 元素上显式设置了绿色，因此这就是继承的内容。
在开发者工具中查找计算值
这就是我们开始讨论开发者工具中计算值的地方。与属性的默认值一样，CSS 属性的计算值由 CSS 规范中该属性的定义表确定。以下是 height 属性的外观。
假设我们在 CSS 中使用相对长度，例如 10em 或 70% 或 5vw 之一。由于这些是相对于某些东西——字体大小或视口——它们需要解析为像素绝对值。例如，如果视口宽度为 1000px，则宽度为 10% 的元素可能计算为 100px，但在视口宽度发生变化时，则会计算为其他数字。
这些值在 DOM 修改时在称为计算样式计算的过程中计算。这使浏览器知道将哪些样式应用于每个页面元素。
样式计算包含多个步骤，涉及多个值。这些在 CSS 级联和继承级别 4 规范中进行了记录，它们都会影响我们在“计算”选项卡中看到的最终值。接下来让我们看看这些。
值及其处理方式
为样式计算过程定义的值包括声明值、指定值、级联值、计算值、使用值和实际值。谁知道有这么多，对吧？
声明值
声明值是应用于元素的任何属性声明。浏览器根据一些条件识别这些声明，包括：

声明位于应用于当前文档的样式表中
样式声明中存在匹配的选择器
样式声明包含有效的语法（即，有效的属性名称和值）

以下 HTML：
<code><main>
  <p>It's not denial. I'm just selective about the reality I accept.</p>
</main></code>
以下是应用于文本字体大小的声明值：
<code>main {
  font-size: 1.2em; /* 如果段落元素没有被专门定位，这将适用，即使那样，作为继承值，而不是“声明值” */
}
 
main > p {
  font-size: 1.5em; /* 声明值 */
}</code>
级联值
应用于元素的所有声明值列表都根据以下内容进行优先级排序以返回单个值：

声明的来源（它来自浏览器、开发人员还是其他来源？）
声明是否标记为“!important”
规则的具体程度（例如，span {} 与 section span {}）
外观顺序（例如，如果应用多个声明，则使用最后一个声明）

换句话说，级联值是“获胜”的声明。如果级联没有产生获胜的声明值，那么就没有级联值。
<code>main > p  {
  font-size: 1.2em;
}
 
main > .product-description { /* 上一个规则中定位的相同段落 */
  font-size: 1.2em; /* 基于特异性和文档顺序的级联值，忽略所有其他考虑因素，例如来源 */
}</code>
指定值
如前所述，级联的输出可能是空的。但是，仍然需要通过其他方式找到值。
现在，假设我们没有为元素上的特定属性声明值，而是为父元素声明了值。这是我们经常故意做的事情，因为无需在多个位置设置相同的值。在这种情况下，将使用父元素的继承值。这称为指定值。
在许多情况下，级联值也是指定值。但是，如果不存在级联值并且所关注的属性是继承的（无论是默认继承还是使用 inherit 关键字），它也可以是继承值。如果属性未继承，则指定值是属性的初始值，如前所述，也可以使用 initial 关键字显式设置。
总而言之，指定值是我们打算在元素上使用的值，无论是否在该元素上显式声明它。这有点模糊，因为如果样式表中没有任何声明，浏览器的默认值也可以成为指定值。
<code>/* 浏览器默认值 = 16px */
 
main > p {
  /* 没有为段落元素及其所有祖先声明字体大小的值 */
}</code>
计算值
前面我们简要讨论了相对值需要如何解析为其像素绝对等效值。如前所述，此过程是预先确定的。例如，属性定义表具有“计算值”字段，该字段详细说明了通常如何解析指定值。
在下面的示例中，我们使用 em，这是一个相对单位。在这里，在将属性应用于的元素进行渲染时使用的最终值不是声明值中显示的固定数字，而是需要根据一些因素计算的值。
<code>main {
  font-size: 1.2em;
}
 
main > p {
  font-size: 1.5em; /* 声明值 */
}</code>
段落元素的字体大小设置为 1.5em，它相对于 main 元素的字体大小值 1.2em。如果 main 是  元素的直接子元素——并且在上面没有进行额外的字体大小声明，例如通过使用 :root 选择器——我们可以假设段落字体大小的计算将遵循以下大致过程：
<code>Browser_Default_FontSize = 16px;
Calculated_FontSize_For_Main = 1.2 * Browser_Default_FontSize; // 19.2px
Calculated_FontSize_For_Paragraph = 1.5 * Calculated_FontSize_For_Main; // 28.8px</code>
28.8px 是计算值。这是一个演示：
打开开发者工具并查看“计算”选项卡中的计算字体大小。
假设我们使用的是 rem 单位：
<code>html {
  font-size: 1.2em;
}
 
main {
  font-size: 1.5rem;
}
 
div {
  font-size: 1.7rem;
}</code>
rem 单位的计算值基于根 HTML 元素的字体大小，这意味着计算会略有变化。在本例中，我们也在 HTML 元素上使用了相对单位，因此使用浏览器的默认字体大小值来计算我们将用于解析所有 rem 值的基本字体大小。
<code>Browser_Default_FontSize = 16px
Root_FontSize = 1.2 * Browser_Default_FontSize; // 19.2px
Calculated_FontSize_For_Main = 1.5 * Root_FontSize; // 28.8px
Calculated_FontSize_For_Div = 1.7 * Root_FontSize; // 32.64px</code>
再次为这个演示打开开发者工具：
Browser_Default_FontSize 的值 16px 通常由浏览器使用，但这可能会因浏览器而异。要查看您当前的默认值，请选择开发者工具中的元素并查看为其显示的字体大小。请注意，如果像我们的示例一样为根元素显式设置了值，您可能必须在“规则”选项卡中将其关闭。接下来，在“计算”选项卡中切换“显示全部”或“浏览器样式”（Firefox）复选框以查看默认值。
在继承期间，计算值将从父元素传递给子元素。此计算过程考虑了我们前面看到的四个继承控制关键字。通常，相对值变为绝对值（即 1rem 变为 16px）。这也是相对 URL 变为绝对路径的地方，以及诸如 bolder（font-weight 属性的值）之类的关键字被解析的地方。您可以在文档中看到更多此类示例。
使用值
使用值是在对计算值完成所有计算后的最终结果。在这里，所有相对值都变为绝对值。此使用值将（暂时）应用于页面布局。您可能想知道为什么还需要进一步计算。在处理指定值以计算值时，所有这些不都已在上一阶段处理了吗？
问题是这样的：某些相对值只有在此处才能解析为像素绝对值。例如，百分比指定的宽度可能需要页面布局才能解析。但是，在许多情况下，计算值最终也成为使用值。
请注意，在某些情况下，使用值可能不存在。根据 CSS 级联和继承级别 4 规范：

…如果属性不应用于元素，则它没有使用值；因此，例如，flex 属性在不是弹性项目的元素上没有使用值。

实际值
有时，浏览器无法立即应用使用值，需要进行调整。此调整后的值称为实际值。考虑一下需要根据可用字体调整字体大小的情况，或者浏览器只能在渲染期间使用整数值并需要近似非整数值的情况。
浏览器样式计算中的继承
总而言之，继承控制为未显式设置的属性应用于元素的值。对于继承属性，此值取自父元素上计算的值，对于非继承属性，将设置该属性的初始值（当指定 initial 关键字时使用的值）。
我们前面简要讨论了“计算值”的存在，但我们确实需要澄清一些事情。我们讨论了计算值作为参与样式解析过程的一种值类型，但“计算值”也是浏览器为页面样式计算的值的通用术语。您通常可以通过周围的上下文来理解我们指的是哪种类型。
只有计算值才能访问继承属性。像素绝对值（例如 477px）、数字（例如 3）或值（例如 left（例如 text-align: left））已准备好进行继承过程。像 85% 这样的百分比值不是。当我们为属性指定相对值时，必须计算最终（即“使用”）值。百分比值或其他相对值将乘以参考大小（例如字体大小）或值（例如设备视口的宽度）。因此，属性的最终值可能只是声明的值，也可能需要进一步处理才能使用。
您可能已经注意到，浏览器“计算”选项卡中显示的值不一定是我们前面讨论的计算值（如计算值与指定值或使用值）。相反，显示的值与 getComputedStyle() 函数返回的值相同。此函数返回一个值，该值取决于属性，将是计算值或使用值。
现在，让我们看一些例子。
颜色继承
<code>main {
  color: blue;
}

/* 颜色无论如何都会继承，但我们也可以明确说明： */
main > p {
  color: inherit;
}</code>
main 元素上 color 属性的计算值为蓝色。由于颜色默认继承，我们实际上不需要为段落子元素使用 color: inherit，因为它最终也会是蓝色。但这有助于说明这一点。
颜色值会经历自身的解析过程以成为使用值。
字体大小继承
<code>main {
  font-size: 1.2em;
}

main > p {
  /* 未指定样式 */
}</code>
正如我们在关于值及其处理方式的部分中看到的，我们的字体大小相对值将计算为绝对值，然后由段落元素继承，即使我们没有显式声明它（同样，字体大小默认继承）。如果我们之前通过全局段落元素选择器设置了样式，则段落可能会由于级联而获得一些额外的样式。任何可能继承的属性值都将继承，并且级联和继承没有产生值的某些属性将设置为其初始值。
百分比指定的字体大小继承
<code>body {
  font-size: 18px;
}

main {
  font-size: 80%;
}

main > p {
  /* 未指定样式 */
}</code>
与前面的示例类似，<main></main> 元素的字体大小将在准备继承之前被绝对化，段落将继承一个字体大小，该字体大小是主体 18px 值的 80%，即 14.4px。
强制继承和布局后计算
计算值通常在没有布局的情况下尽可能多地解析指定值，但如前所述，某些值只能在布局后解析，例如百分比指定的宽度值。尽管 width 不是继承属性，但我们可以强制继承以说明布局前和布局后样式解析。
这是一个人为的例子，但我们所做的是通过将 display 属性设置为 none 来将元素从页面布局中移除。我们的标记中有两个 div 继承了其父元素的宽度 50%。在我的开发者工具“计算”选项卡中，第一个 div 的计算宽度是绝对的，已解析为像素值（对我来说是 243.75px）。另一方面，使用 display: none 从布局中移除的第二个 div 的宽度仍然是 50%。
我们将假设父元素的指定值和计算值为 50%（布局前），使用值如“计算”选项卡下所示——对我来说是 487.5px，布局后。此值被子 div 一分为二（包含块的 50%）。
每当浏览器视口的宽度发生变化时，都必须计算这些值。因此，百分比指定的值变为百分比计算值，然后变为像素使用值。
默认继承的属性
您如何知道属性是否默认继承？对于 MDN 文档中的每个 CSS 属性，都有一个规范部分提供一些额外的详细信息，包括该属性是否继承。以下是 color 属性的外观：

哪些属性默认继承，哪些属性不继承，这在很大程度上取决于常识。
MDN

另一个参考选项是 W3C 规范的属性部分。另一个是这个 StackOverflow 线程，在撰写本文时可能并不详尽。
以下是一些默认继承的属性示例：

color
direction
font-family
font-size
font
letter-spacing
line-height
list-style-type
tab-size
text-align
text-justify
text-transform
visibility
word-wrap

不继承的属性示例（但您可以使用 inherit 关键字强制继承）：

box-shadow
border
content
height
margin
object-fit
opacity
padding
position
transform
transition
width
z-index

希望这能让您对浏览器如何计算样式以及如何在开发者工具中引用它们有一个清晰的了解。如您所见，幕后有很多值。拥有这些上下文对于帮助您排除工作故障以及进一步了解我们所知的奇妙语言 CSS 非常有帮助。
进一步阅读

QuirksMode.org 的 inherit、initial 和 unset 值
Asha Laxmi 的 CSS 继承：简介
Heydon Pickering 的 CSS 继承、级联和全局范围：您新的旧的坏最好的朋友
Ollie Williams 的处理级联、继承和特异性的最新方法
MDN 的级联和继承
MDN 的继承
MDN 的级联
CSS 级联和继承级别 4（W3C 规范）
Ilya Grigorik 的渲染树构建、布局和绘制
MDN 的 Window.getComputedStyle()

Aaron Gustafson 的交互式 URL