请注意，不是“样式”面板（我知道在这种情况下呈灰色表示不适用），而是下一个面板，即“计算属性”面板。
灰色显示计算属性是什么意思？
例：
Chrome开发工具显示灰色的计算属性是什么意思
Answers:
注意：这个答案没有确凿的证据，这是基于我对时间的观察。
灰色的计算属性既不是默认属性，也不是继承属性。这仅发生在未为元素定义的属性上，而是根据运行时布局渲染从其子级或父级计算出的属性。
以这个简单的页面为例，它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 '16
@AmbroseChapel我再次考虑并更新了答案。我应该去阅读源代码。好问题。
—
狮子座
灰色属性当然是有道理的，
—
Niko Bellic
run-time calculated因为灰色属性通常是“高度”和“宽度”，如果您考虑一下，它们是动态依赖于元素子元素的值（例如，文本的数量和字体大小元素中包含的文本，或元素具有宽度时父元素的宽度：100％）
CDT的一个不错的功能是：查看值的计算方式，这意味着：例如哪些元素加起来就是
—
传奇
width样式。