Chrome开发工具能否显示元素大小的来源或原因？

Question

在Chrome开发者工具（自Chrome 63起）的“元素”窗口中选择一个元素时，“计算”标签将显示当前计算出的宽度和高度以及所有其他非默认属性。

但是据我所知，它并没有描述，解释或揭示来源或原因为一个元素的框的大小，如果它的大小是不是由于直接向直接设置属性，或者财产继承或级联。

考虑以下示例：

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

使用默认HTML5样式表（即div, p { display: block;}）Chrome浏览器将显示计算的宽度和高度#div1，并#p1是相同的，但无处没有指出的高度#div1是造成#p1，也不是说#p1的身高是由它的内容引起的（也考虑到line-height，font-size以及其他相关的性质）。

如果将样式表更改为此：

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

...然后，“开发人员工具”窗口应提供一些指示，表明#div1的高度直接来自height: 500px;属性，而#p1的高度现在源自#div1而不是其内容。

Chrome开发人员工具或JavaScript工具中是否存在此功能？

Answer 1

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