Question

在此处检查具有块样式的元素时，CDT将height属性显示为灰色： http://s.codepen.io/WhitneyLand/debug/zGpZbN

dimmed height property

文档说dimmed意味着继承的属性不会影响元素，但很明显高度值是继承的，但是正在影响元素。

那么，我们如何使用CDT追踪这样的风格来源？

/* full example http://s.codepen.io/WhitneyLand/debug/zGpZbN */
<div class="block block-fixed">
    aaa
</div>

Answer 1

这是因为高度是根据div的内容计算出来的。即，＆＃39; aaa＆＃39;文本。将font-size: 40px;添加到.block-fixed类会将计算出的高度增加到47px。在这种情况下，它会因为计算而变暗。

Answer 2

您看到的height是computed样式属性（通过浏览器的渲染引擎计算），而不是声明/继承的属性。当您将鼠标悬停在DOM检查器中的总元素上时，您会注意到＆＃34; height＆＃34; div的高度为19px - 18px，底部边界为1px。