Question

我现在正在学习如何开发响应式液体CSS设计并遇到技术，其中块显示元素（例如div）具有％维度。为了显示它们，使用以下CSS代码：

.class:before {
    content: "";
    display: block;
    padding-top: 100%;
}

我的困惑来自填充属性。据我所知，在CSS框模型（CSS2）中，填充会影响块元素的内部，而不是外部。但是在使用的技术中，没有它，元素是不可见的。有人可以用盒子模型向我解释一下，padding属性在这里做什么？

如果我的解释令人困惑，我附上两个带有工作示例的链接：

亚历山大。

Answer 1

基本答案是，如果HTML中有一个空盒子项，那么页面上显示的元素的宽度和高度将为0，使项目不可见。这是有道理的：如果里面没有任何内容，并且大小为0，那么谁想要看到它呢？

您使用填充做的事情是将其填充为父框的100％填充值。因为填充会影响块的内部（并且外部边缘），所以盒子的整体宽度和高度会发生变化。这使得框在屏幕上绘制，并创建您在jsFiddle中看到的蓝色框。

当您移除它时，您的框没有显示的原因是属性overflow: hidden。当你这样说时，如果里面的内容溢出了盒子的大小，你就会从盒子中剪掉任何额外的内容。如果您删除overflow: hidden和padding 100%，那么您最终会得到一些小的白色文字。

编辑：正在进行的其他一些事情：您还使用position: absolute从页面的常规流中删除了一个框项目。这个以及后面的四个top, left, bottom, right标签使该框具有预定义的位置。删除position: absolute会将div作为白色文本周围的蓝框重新进入视图

这是一个观点：CSS是一场噩梦。这不是一个意见：学习CSS的一个好方法是单独添加或减去CSS行，看看他们个人做了什么。值得庆幸的是，W3学校还包含CSS和HTML中每个属性的大量列表，这意味着您通常可以通过搜索＆＃34; W3 mythingyhere＆＃34;

来了解这些语言中的内容是如何工作的。

Answer 2

CSS伪元素::before (:before)或::after (:after) + content属性，在容器内创建子元素。

百分比padding值相对于容器的width - W3C spec，padding-top:100% + display:block创建一个广场。

.square {
    width: 10%;
    background: blue;
}
.square:before {
    content: "";
    display: block;
    padding-top: 100%;
}

<div class="square"></div>