我今天了解到关于基于百分比 (%) padding 的一些内容，但我一直都搞错了！我一直以为百分比填充是基于元素本身。因此，如果一个元素的宽度为 1000 像素，并且 padding-top: 50%，那么该填充值为 500 像素。根据宽度来设置顶部填充很奇怪，但这就是它的工作方式——但只是 有点。50% 是基于 父元素的宽度，而不是元素本身。这就是让我感到困惑的部分。
我唯一使用过百分比填充的地方是用来做 纵横比盒子 技巧。元素的宽度是流动的，但您想要保持纵横比，因此需要使用百分比填充技巧。在这种情况下，元素的宽度就是父元素的宽度，所以我的错误的思维模型从来没起作用过。
要证明这一点并不难
查看 Pen
% 填充是基于父元素，而不是元素本身 by Chris Coyier (@chriscoyier)
on CodePen.
感谢 Cameron Clark 发送关于此内容的电子邮件
当您有一个完全扩展到填满其父元素宽度的块元素时，这种差异是无关紧要的，就像本文中使用的所有示例一样。但是，当您在元素上设置任何其他宽度（而不是 100%）时，这种误解会导致令人费解的结果。
他们指出了 Aayush Arora 撰写的 这篇文章，这篇文章声称只有 1% 的开发人员知道这一点。
哇，我想我就在那 1% 之中。这解释了我之前在一些响应式设计中使用它时的很多问题。
我想我也在那 1% 之中。多年来与 CSS 的打交道终于让我找到了自己的定位。
哇，我真的属于大多数不知道这一点的人。感谢您的信息。
是的，而且当您在子元素上设置
max-width时，这个问题经常出现。这就是为什么我总是使用伪元素来进行填充的原因.child:after {content: " ";
display: block;
padding-top: 50%;
}
如果您想让某样东西始终与屏幕宽度保持相同的纵横比，这种行为非常有用：（例如用于页眉图片或作为 iframe 容器）
您将 div 的高度设置为 0，宽度设置为 100%，并将
padding-bottom设置为所需的纵横比。例如：
padding-bottom: calc(100 / (16 / 9)) %嘿，伙计们。我使用 CSS 已经有 20 年了，我也属于那 1% 之中。
这是通过尝试和错误学习 CSS 得来的，而不是通过复制粘贴框架代码。
我已经知道这一点 20 年了，但我不得不多次纠正别人 :)
第一个常见的错误是不知道垂直百分比填充是基于包含块的宽度，而第二个错误是认为包含块就是当前元素 :)
请注意，我曾经花很多时间阅读规范（https://www.w3.org/TR/2011/REC-CSS2-20110607/box.html#padding-properties），但我现在已经放弃了，因为 CSS 太庞大了。;)
这个示例有点令人困惑，因为它看起来只是一个小的红色矩形挨着一个大的蓝色矩形。添加一点不透明度，这样我们就能看到两个元素，这样更容易理解。