“上：0；左：0；下：0；右：0；”是什么意思意思？

Question

我正在阅读本网站上有关居中元素技术的指南。

我阅读了 CSS 代码，

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

我也看了解释。

但我不明白的是解释“顶部：0；左：0；底部：0；右：0；”的部分。

它说，

置顶：0； 左：0； 底部：0； 右：0； 为浏览器提供一个新的块边界框。 此时块将填充其偏移父项中的所有可用空间，即主体或位置：相对； 容器。 Developer.mozilla.org：对于绝对定位的元素，top、right、bottom 和 left 属性指定从元素包含块边缘的偏移量（元素相对于什么定位）。

这是什么意思？ 边界框？ 填满所有可用空间？

“顶部：0；左侧：0；底部：0；右侧：0；” 工作？ 是否需要将盒子的 4 个边拉伸以填充容器？ 这就是价值观的运作方式吗？

当我设置 "top: 0; left: 0; bottom: 0; right: 0;" 时实际发生了什么？

我完全迷失在这个解释中，我希望有人以更简单易懂的方式重新表述、重述和解释给我听。

谢谢你。

Answer 1

当你使用会发生什么left和right （或top和bottom ）在同一时间被迷惑，因为规范[ 6.3。 绝对定位] 告诉我们：

对于包含块基于块级元素的绝对定位元素，此属性是从该元素的填充边缘的偏移量。

那么设置位置如何影响元素的大小呢？ 原因源于宽度的计算方式，它隐藏在规范的另一部分[8.1. 绝对或固定定位、非替换元素的宽度] 。

如果您同时指定left和right并且您的元素的width不是auto ，那么您所说的确实没有意义，并且忽略了right （所有语句同样适用于顶部/底部/高度）：

如果 left/right/width 都不是 auto...值被过度约束，忽略左值（如果包含块的方向属性是 rtl）或右值（如果方向是 ltr）并求解那个值。

但是如果你的元素没有设置宽度，或者宽度是（默认） auto ，这个规则就会生效：

如果宽度是自动的，左右不是自动的，那么求解宽度。

最后，确定这些元素值的等式是：

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right ' = 包含块的宽度

我们可以清楚地看到，在插入我们的left和right等值之后， width是未解决（且不受约束）的变量，它将变成width of containing box - left - right （或多或少）或放置另一种方式：“填充偏移量之间的空间”。

Answer 2

您可以使用 top: 0; 制作 100% 宽度和 100% 高度； 左：0； 底部：0； 右：0；

示例：您有一个 div，该 div 没有固定的宽度和高度。 在这种情况下，您可以应用此样式并使宽度和高度为 100%。

div{
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
}

JSFIDDLE 演示

Answer 3

像下面的 css 片段一样定位一个 div 或一个绝对元素会扩展元素以获取父元素的完整宽度和高度。 如果父元素是整页元素，则样式元素将占据整页。 如果下方或上方有更多可用内容，它们将按原样可见。

    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

另一方面，定位为固定使其全屏。 此外，它不会滚动，而是将其视为页面顶部的内容（通常），它独立于页面的其他元素，可以像往常一样滚动（如果固定元素具有不透明度：1 并且是整页，则不可见） ）。

   position: fixed;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;