填充如何在响应 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 行以查看它们在 div 中的作用。值得庆幸的是，W3 Schools 还包含 CSS 和 HTML 中每个属性的巨大列表，这意味着您通常可以通过搜索 "W3 mythingyhere"[= 来了解这些语言中的内容应该如何工作16=]

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>

填充如何在响应 CSS 方块中工作？

How does the padding work in responsive CSS square?

css

liquid-layout

responsive-design