gpt4 book ai didi

css - 当 Chrome Dev Tools 将计算属性显示为灰色时,这意味着什么

转载 作者:数据小太阳 更新时间:2023-10-29 09:08:06 24 4
gpt4 key购买 nike

请注意,不是样式面板(我知道在那个上下文中变灰意味着什么——未应用),而是下一个面板,计算属性面板。

计算属性显示为灰色是什么意思?

例子:

enter image description here

最佳答案

注意:这个答案没有确凿的证据,它是基于我一直以来的观察。

灰色计算属性既不是默认的,也不是继承的。这仅发生在未为元素定义的属性上,但根据运行时布局渲染从其子元素或父元素计算。

以这个简单的页面为例,display是默认值,font-size是继承的:

<style>
div { font-size: 13px; }
</style>
<div>
<p>asdf</p>
</div>

enter image description here

在此特定示例中,height<p> 计算得出的 child - 文本节点(字体大小加行高),width是从其父级计算的 - <div>的宽度,也是根据其父项 <body> 计算得出的.


编辑好吧,我又想了想,这是我的基于意见的答案。我真的应该稍后再去看看 Chromium 源代码 :D

通过展开这些箭头,您可以看到哪些实际规则应用于该元素,以及针对它定义的所有规则(直接或继承,由开发人员或浏览器):

enter image description here

在这里您可以追溯到每个定义,甚至包括浏览器内置规则,并使用 CSS 级联(覆盖)机制进行检查。

因此,对于那些没有 CSS 定义(没有直接定义、没有继承、没有浏览器内置)的元素,您没有任何来源可追溯。并且属性值完全是运行时计算的。

如果您选中显示全部,则会显示更多灰色属性。这些也没有在任何地方定义。但与之前的屏幕截图不同,这些不是运行时计算的 - 它们是 CSS 规范的默认值。

enter image description here

关于css - 当 Chrome Dev Tools 将计算属性显示为灰色时,这意味着什么,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34712218/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com