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

【问题标题】：What does "top: 0; left: 0; bottom: 0; right: 0;" mean?“上：0；左：0；下：0；右：0；”是什么意思？意思是？
【发布时间】：2015-03-20 18:44:09
【问题描述】：

我正在阅读来自 site 的关于元素居中技术的指南。

我阅读了 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;”时实际发生了什么？

我完全听不懂这个解释，我希望有人能以更简单易懂的方式改写、重述和解释它。

谢谢。

【问题讨论】：

这句话直接回答了你的问题。 “该块将填充父级中的所有可用空间，即主体或position: relative; 容器”。和“顶部、右侧、底部和左侧属性指定与容器的偏移量”。

标签： html css css-position

【解决方案1】：

当您同时使用left 和right（或top 和bottom）时会发生什么，令人困惑，因为规范 [6.3. Absolute positioning] 告诉我们：

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

那么设置position如何影响元素的size呢？原因在于宽度是如何计算的，这隐藏在规范的另一部分，[8.1. The width of absolute or fixed positioned, non-replaced elements]。

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

如果左/右/宽度都不是自动的...值被过度约束，忽略 left 的值（如果包含的方向属性块是rtl）或右（如果方向是ltr）并解决这个问题价值。

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

如果width是auto，left和right不是auto，则求解width。

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

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

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

【讨论】：

【解决方案2】：

您可以使用 top: 0 来设置 100% 的宽度和 100% 的高度；左：0；底部：0；右：0；

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

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

JSFIDDLE DEMO

【讨论】：

要在此处模拟与 top, bottom, right, left 组合完全相同的输出，请添加以下 CSS 规则 body{margin:0; padding:0;}，这两种方法都会有相同的外观
为什么我们不能只使用width: 100%？
您也可以使用 100%，但不能提供 100%。对于高度，您使用“顶部”和“底部”位置和宽度：100%

【解决方案3】：

定位 div 或元素 absolute 如下 css sn-p 扩展元素以获取父级的完整宽度和高度。如果 parent 是整页元素，则样式元素将占据整页。如果下方或上方有更多可用内容，它们将按应有的方式显示。

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

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

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

【讨论】：