Chrome Dev Tools显示灰色的计算属性意味着什么?

请注意, 不是 “样式”面板(我知道该上下文中的灰色表示方式 – 没有应用),而是下一个面板,即“计算属性”面板。

计算属性显示为灰色时,意味着什么?

例:

在这里输入图像说明

One Solution collect form web for “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规格的默认值。

在这里输入图像说明

  • 在Firefox中删除额外的button间距/填充
  • 如何检查和调整之前和之后:在浏览器中的伪元素?
  • 如何添加平滑滚动Bootstrap的滚动间谍function
  • 溢出:隐藏不工作
  • 如何避免iOS自动调整字体大小?
  • 如何使用jQuery更改CSS?
  • CSS:设置宽度等于内容
  • CSS:我怎样才能设置图像大小相对于父母的高度?
  • 设置Google地图容器DIV的宽度和高度100%
  • 如何使<label>和<input>出现在HTML表单的同一行上
  • background-position-x(background-position-y)是一个标准的W3C CSS属性吗?