css 如何padding-top：100%工作？

a0x5cqrl 于 2023-04-01 发布在其他

关注(0)|答案(2)|浏览(264)

下面的代码：

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

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

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

由于某种原因，子元素变成了一个完美的正方形。这至少是奇怪的，因为没有一个div被分配了任何高度。为什么会发生这种情况？
padding-top: 100%是什么？
Fiddle

2条答案

您的子div正在以100%的宽度填充父div。以百分比表示的Padding-top属性由div宽度决定。因此，您的子div将获得父div的100%宽度（30%），并且padding top 100%意味着该元素的100%宽度。这同样适用于margin-top，它是根据宽度计算的。

child上的padding-top: 100%使其成为一个完美的正方形，因为child的高度为0px，因此顶部的填充是唯一占用空间的东西。
因此，如果高度不为0，那么你就不会得到一个完美的正方形。