当Chrome Dev Tools显示计算属性灰色时，这是什么意思？

Question

144

请注意，不是样式面板（我知道在那种情况下灰色表示未应用），而是旁边的下一个面板，即计算属性面板。

当计算属性显示为灰色时，这意味着什么？

例如：

- AmbroseChapel

1

@hestellezg 这不是重复的内容；这是指计算出来的。 - Geoffrey Hale

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Leo · Accepted Answer

NB：此答案没有实际证据，仅基于我长期观察得出的结论。

灰色计算属性既不是默认值，也不是继承值。这仅发生在未为元素定义属性，而是根据运行时布局渲染从其子级或父级计算出的属性上。

以这个简单的页面为例，display 是默认值，font-size 是继承值：

<style>
  div { font-size: 13px; }
</style>
<div>
  <p>asdf</p>
</div>

在这个例子中，height 是从 <p> 的子元素中计算出来的（文本节点的字体大小和行高），而 width 则是从它的父元素 - <div> 的宽度计算出来的，而它的父元素又是由 <body> 计算得出的。

编辑：我再次思考了一下，这里是我的基于意见的回答。我真的应该去看看 Chromium 源代码：D

通过展开那些箭头，您可以看到哪些实际规则应用于元素，在所有针对它定义的规则中（无论是直接定义还是继承自开发人员或浏览器）：

在这里，您可以追溯到每个定义，甚至包括浏览器内置规则，并检查 CSS 级联（覆盖）机制。

因此，对于那些没有 CSS 定义的元素（既没有直接定义，也没有继承，也没有浏览器内置定义），您没有任何源可追溯。属性值完全是运行时计算得出的。

如果您选择 显示全部，则会显示更多灰色的属性。这些属性也没有在任何地方定义。但与先前屏幕截图中的不同，这些属性不是运行时计算 - 它们是 CSS 规范的默认值。