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

Question

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

但据我所知，它并没有描述，解释或揭示元素框中的源或原因＆＃39 ; s大小，如果它的大小不是直接由于直接设置属性，或属性继承或级联。

考虑这个例子：

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

使用默认的HTML5样式表（即div, p { display: block;}），Chrome会显示计算出的#div1和#p1的宽度和高度相同，但它没有说明{的高度{1}}由#div1引起，#p1的高度也不是由其内容引起的（也考虑了#p1，line-height和其他相关内容属性）。

如果样式表更改为：

font-size

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

Chrome Developer工具甚至JavaScript工具中是否存在此功能？

Answer 1

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