javascript - wIdth/height 继承 div 的行为

Question

我对 div 的宽度和高度的继承有疑问。

我有以下代码片段:

<div id="div1" style="width:50%; height:50%;">
    <div id="div2">
    </div>
</div>

当我输出 div 的宽度和高度时，div2 返回与 div1 相同的宽度，但不相同的高度。为什么会这样？宽度和高度不应该被继承，所以在我看来，对于 div2，两者都应该显示 0px。

console.log(getComputedStyle(div1).width); // 727px
console.log(getComputedStyle(div1).height); // 494.5px
console.log(getComputedStyle(div2).width); // 727px
console.log(getComputedStyle(div2).height); // 0px

Answer 1

宽度的关键是 div 是 display: block，自动。 block 跨越其父级的整个宽度，除非指定了 width css 属性，在这种情况下，它们将使用该属性。

至于高度，div 会尽量小。由于 #div2 没有内容，它的高度将为 0 像素。对于 #div1，指定了 height 属性，因此它将是其父级高度的 50%，我假设它是您的浏览器窗口。

请注意，您指定的尺寸不一定是固定的 - 它们只是根据您的浏览器窗口大小计算的值。