Chrome 开发工具可以显示元素大小的来源或原因吗？

Question

当在 Chrome 开发者工具的元素窗口中选择一个元素时（从 Chrome 63 开始），计算选项卡将显示当前计算的宽度和高度，以及任何其他非默认属性。

但据我所知，如果元素的大小不是直接到期的，它并没有描述、解释或揭示元素框大小的来源或原因直接设置属性，或属性继承或级联。

考虑这个例子：

<div id="div1">
    <p id="p1">Lorem ipsum</p>
</div>

使用默认的 HTML5 样式表（即div, p { display: block;}），Chrome 将显示#div1 和#p1 的计算宽度和高度相同，但没有说#div1 的高度是由@ 引起的987654326@，也不是#p1的高度是由其内容引起的（还要考虑line-height、font-size等相关属性）。

如果样式表改成这样：

#div1 { height: 500px; }
#p1 { height: 75%; overflow: hidden; }

...那么开发者工具窗口应该提供一些指示，表明#div1 的高度直接来自height: 500px; 属性，而#p1 的高度现在来自#div1 而不再是它的内容。

此功能是否存在于 Chrome 开发者工具甚至 JavaScript 工具中？

Answer 1

您可以单击一个向下的三角形来查看计算值的来源。我认为您无法看到所有父容器的设置。