填充在响应式 CSS 正方形中是如何工作的？

Question

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

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

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

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

http://www.mademyday.de/css-height-equals-width-with-pure-css.html

http://jsfiddle.net/josedvq/38Tnx/

亚历山大。

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 Schools 还包含 CSS 和 HTML 中每个属性的巨大列表，这意味着您通常可以通过搜索“W3 mythingyhere”来了解这些语言中的某些内容应该如何工作

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>