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 s自动为display: block。除非指定了width css属性，否则块将跨越其父级的整个宽度，在这种情况下，它们将使用该属性。

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

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

Answer 2

百分比值的宽度和高度值计算相对于其容器的像素值，这是您在第一个/父div上看到高度的唯一原因。

您看到宽度的原因是因为div是块元素，这意味着它们默认跨越其父级的宽度。

块元素的默认高度值是其内容的值。

Answer 3

那是因为您指定div1的容器宽度和高度的百分比（50％）为div1，因此它们的宽度和高度都不为零。

对于div2，宽度通常是容器的整个宽度（div1），除非您另行指定，例如使用width: 30px或{{1}高度是width: 25%内容的高度，在本例中为0.（在这种情况下会忽略空格。如果要进行实验，请在其中添加div2和你将得到一个非零的高度。）

wIdth / height继承div的行为

3 个答案: