子宽度计算标准?

Question

我的问题是如此简单，但对我来说相当有问题，如果父div有填充和子div的宽度是100%，子div的宽度总是比父div短。如果我将子div更改为绝对div，父div更改为相对div，子div的宽度就等于父div的宽度，无论父div中的padding和margin如何。这样的:

.first {
background-color: yellow;
width: 100px;
height: 100px;
padding: 10%;
position: relative;
}
.second {
background-color: blue;
position: absolute;
width: 100%;
height: 100%;
opacity: 40%;
}

<div class="first">HI
<div class="second">
HELLO
</div>
</div>

尽管parent的位置是完全相对的，所以你假设Child完全依赖于'.first'div。那么，我假设在这种情况下子宽度是如何计算的?

Answer 1

当您将子div设置为position absolute(并且父元素具有position relative value)时，则该元素将从正常文档流中删除。另外，如果left属性不是'auto'，则"忽略"是正常的。因为根据W3C文档，这些属性指定了相对于框的包含块的偏移量。(如果它是auto，那么它不应该忽略padding，但是width: 100%会忽略padding;当父级为100px时，子级也将有100%的宽度)。