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规格的默认值。

在这里输入图像说明

  • Twitter Bootstrap:在导航栏中使用`.btn`类的正确方法是什么?
  • 溢出到左边而不是右边
  • 我如何强制浮动DIV匹配另一个浮动DIV的高度?
  • 在Twitter Bootstrap中更改select标签的宽度
  • 隐藏的CSS盒子阴影(z-index不能修复)
  • Bootstrap中的容器,行和跨度之间的差异
  • CSS:如何有位置:绝对div在一个位置:相对div不会被溢出裁剪:隐藏在容器上
  • Div垂直滚动条显示
  • html(+ css):表示换行的首选位置
  • 将浮动div集中在另一个div中
  • 我怎样才能让我的柔性版式占据100%的垂直空间?