css - 响应式 CSS 方形中的填充如何工作？

Question

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

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

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

为了防止我的解释令人困惑，我附上了两个带有工作示例的链接:

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

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

亚历山大。

Answer 1

基本的答案是，如果您在 HTML 中有一个空框元素，那么页面上显示的元素的宽度和高度将为 0，从而使该元素不可见。这是有道理的:如果里面什么都没有，而且大小为 0，那谁想看呢!？

您对填充所做的操作是使其成为父框填充值的 100%。因为填充会影响 block 的内部(并在外部留出边距)，所以框的整体宽度和高度会发生变化。这使得框在屏幕上绘制，并创建您在 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”来了解这些语言中的东西应该如何工作