Chrome Dev Tools显示灰色的计算属性意味着什么？
请注意， 不是 “样式”面板（我知道该上下文中的灰色表示方式 – 没有应用），而是下一个面板，即“计算属性”面板。
计算属性显示为灰色时，意味着什么？
例：
注意：这个答案没有可靠的证据，这是基于我的观察。
灰色计算的属性既不是默认的， 也不是inheritance的。 这只发生在没有为元素定义的属性上，而是根据运行时布局呈现从子元素或父元素中计算出来。
以这个简单的页面为例， display是默认的， font-size是inheritance的：
<style> div { font-size: 13px; } </style> <div> <p>asdf</p> </div>
在这个特殊的例子中， height是根据<p>的孩子计算的 – 文本节点（字体大小加上行高）， width是从父母的<div>的宽度计算的，也是从父母的<body> 。
编辑：好吧，我想再次，这是我的意见为基础的答案。 以后我应该去看看Chromium源代码：D
通过扩展这些箭头，您可以看到哪些实际的规则应用于元素，在所有定义的元素中（直接或通过开发人员或浏览器inheritance）：
在这里，您可以追踪到每个定义，甚至包括浏览器内置规则，并检查CSS级联（覆盖）机制。
所以，对于那些没有CSS定义的元素（没有直接定义，没有inheritance，没有内置浏览器），你没有任何源代码可以跟踪。 属性值完全是运行时计算的。
如果选中全部显示 ，则会显示更多的灰色属性。 这些也没有在任何地方定义。 但不像以前的屏幕截图，这些不是运行时计算 – 它们是CSS规格的默认值。
