Html 填充百分比是如何工作的？

HTML

<div class='wrapper'>
    <div class='elementContainer'>
        This line should start halfway down the yellow box
    </div>
</div>

小提琴示例：

在上面的示例中，

.elementContainer

的填充顶部为

50%

。这应该基于父元素（

.wrapper

）的高度来计算，这意味着它应该达到

150px

。相反，结果是

200px

。发生了什么事？

解释原因

百分比是根据生成的框的包含块的宽度计算的

400的50%是200。

解释原因

百分比是根据生成的框的包含块的宽度计算的

---

400的50%是200。

显然它被计算为

.elementContainer

padding top:50%

…是的，这就是我写的。我想你可能误读了文档。文档说明百分比基于“包含块”，而不是包含块的父级。在这种情况下，它应该仅为

100px

，因为包含块是

200px

高。好的，文档还说明它基于宽度，在你的例子中，它是400 in

.wrapper

看，显然它被计算为

.elementContainer

padding top:50%

…是的，这就是我写的。我想你可能误读了文档。文档说明百分比基于“包含块”，而不是包含块的父级。在这种情况下，它应该仅为

100px

，因为包含块是

200px

高。好的，文档还说明它基于宽度，在您的情况下，宽度是400 In

。wrapper

请参阅

.wrapper
{
    position: relative;

    height: 300px;
    width: 400px;

    background: lightyellow;
    border: 1px solid black;
}

.elementContainer
{
    position: relative;
    height: 200px;
    width: 300px;

    padding-top: 50%;

    background: red;
}