Chrome 开发工具显示计算属性灰显是啥意思
Posted
技术标签:
【中文标题】Chrome 开发工具显示计算属性灰显是啥意思【英文标题】：What does it mean when Chrome Dev Tools shows a computed property greyed outChrome 开发工具显示计算属性灰显是什么意思 【发布时间】：2016-04-15 05:05:20 【问题描述】：请注意，不是样式面板（我知道在该上下文中变灰意味着什么——未应用），而是下一个面板，计算属性面板。
Computed 属性显示为灰色是什么意思？
例子：
【问题讨论】：
What does it mean when a CSS rule is grayed out in Chrome's element inspector?的可能重复 Kayce Basques 来自 Google 添加了此 document computed properties in devtools 和 updated the doc to cover grey entries 【参考方案1】：注意：这个答案没有确凿的证据，它是基于我一直以来的观察。
灰色计算属性既不默认，也不继承。这仅发生在未为元素定义的属性上，而是根据运行时布局渲染从其子元素或父元素计算得出的。
以这个简单的页面为例，display是默认的，font-size是继承的：
<style>
div font-size: 13px;
</style>
<div>
<p>asdf</p>
</div>
在这个特定的例子中，height 是根据 <p> 的子节点 - 文本节点（字体大小加上行高）计算得出的，width 是根据其父节点 - <div> 的宽度计算得出的，这也是从其父 <body> 计算。
编辑：好吧，我又想了想，这是我的基于意见的答案。以后我真的应该去看看 Chromium 源代码 :D
通过展开这些箭头，您可以看到在针对它定义的所有规则（直接或继承，由开发人员或浏览器）中应用于元素的实际规则：
您可以在此处追溯每个定义，甚至包括浏览器内置规则，并检查 CSS 级联（覆盖）机制。
因此，对于那些没有 CSS 定义（没有直接定义、没有继承、没有内置浏览器）的元素，您没有任何来源可追踪。并且属性值完全是运行时计算的。
如果您选中全部显示，则会显示更多灰色属性。这些也没有在任何地方定义。但与之前的截图不同，这些是不是运行时计算的 - 它们是 CSS 规范的默认值。
【讨论】：
这是有道理的。另一个细节：无法像其他属性一样单击灰色属性，以在特定声明中显示其值的来源。 @AmbroseChapel 我再次思考并更新了我的答案。我真的应该去阅读源代码。好问题。 灰色属性是run-time calculated当然是有道理的，因为灰色属性通常是“高度”和“宽度”，如果你考虑一下，它们是动态依赖于元素的子元素的值（例如，元素中包含的文本的数量和字体大小，或者当元素具有宽度时父级的宽度：100%）
一个很好的 CDT 特性是：查看值是如何计算的，意味着：例如，哪些元素加起来是 width 样式。以上是关于Chrome 开发工具显示计算属性灰显是啥意思的主要内容，如果未能解决你的问题，请参考以下文章