html - padding-top : 100% work?如何

Question

我有以下代码:

    .parent {
      width: 30%;
      border: 1px dotted red;
    }

    .child {
      padding-top: 100%;
      border: 1px solid black;
    }

 <div class="parent">
      <div class="child"></div>
    </div>

由于某种原因， child 变成了一个完美的正方形。这至少很奇怪，因为没有任何 div 分配给它们任何高度。为什么会这样？

padding-top: 100% 有什么作用？

Fiddle

Answer 1

您的子 div 以 100% 的宽度填充父级。以百分比表示的 padding-top 属性由 div 宽度决定。因此，您的 child 获得父元素的 100% 宽度 (30%)，填充顶部 100% 意味着该元素的 100% 宽度。 margin-top也是一样，按width计算。