html - 填充百分比如何工作？

Question

HTML

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

CSS

.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;
}

小提琴示例：http: //jsfiddle.net/jakelauer/s2ZXV/

在上面的例子中，.elementContainer有一个 padding-top 50%。这应该根据父元素的 ( .wrapper) 高度计算，这意味着它应该出来150px。相反，它出现在200px. 这是怎么回事？

Answer 1

规范解释了原因。

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

400 的 50% 是 200。