“顶部：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；为浏览器提供了该块的新边界框。此时该块将填充其偏移父级中的所有可用空间，即主体或位置：relative;容器。 Developer.mozilla.org：对于绝对定位的元素，top、right、bottom 和 left 属性指定距元素包含块边缘的偏移量（元素相对于其定位的位置）。

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

“上：0；左：0；下：0；右：0；”是如何实现的？工作？它是否需要将盒子的 4 个边拉伸以填充容器？价值观就是这样运作的吗？

当我设置“顶部：0；左侧：0；底部：0；右侧：0；”时实际发生了什么？

我对这个解释完全迷失了，我希望有人能以更简单和更容易理解的方式重新措辞、重述和解释它。

谢谢你。

Answer 1

当您同时使用

left

和

right

（或

top

和

bottom

）时会发生什么，这很令人困惑，因为规范[3.5绝对定位]告诉我们：

对于绝对定位的元素，其包含块基于 块级元素，此属性是距填充的

offset

（现在称为 insets） 该元素的边缘。

那么设置

position

如何影响元素的size呢？原因源于宽度的计算方式，它隐藏在规范的另一部分[5.1。绝对或固定定位、非替换元素的宽度]. 如果您同时指定

left

和

right

并且您的元素的

width

是

not

auto，那么您所说的确实没有意义，并且

right

会被忽略（所有语句同样适用）到顶部/底部/高度）：

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

但是如果你的元素

没有设置宽度，或者宽度是（默认）

auto

，则此规则生效：

如果宽度为auto，左右不为auto，则求解宽度。

最后，确定这些元素值的方程是：

'左' + '左边距' + '左边框宽度' + '左内边距' + '宽度' + '右内边距' + '右边框宽度' + '右边距' + 'right' = 包含块的宽度

我们可以清楚地看到，在代入

left

和

right

以及其他值之后，

width

是未求解（且不受约束）的变量，结果将是

width of containing box - left - right

（或多或少）或换句话说：“填充偏移之间的空间”。

Answer 2

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

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

JSFIDDLE 演示

Answer 3

absolute

就像下面的 css 代码片段一样，会扩展元素以获取父级的完整宽度和高度。如果父元素是整页元素，则样式元素将占据整页。如果下面或上面有更多内容，它们将按应有的方式可见。

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

另一方面，

定位为

固定

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

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

Answer 4

inset: 0*

，相当于

top: 0; right: 0; bottom: 0; left: 0

。 所有主流浏览器均支持。

 position: absolute;
 inset: 0;