什么是"top:0; left:0; bottom:0; right:0;" 意思？

Question

我正在阅读这个网站的一个关于中心元素技术的指南.

我读了CSS代码,

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

我也读了解释.

但我不明白的是解释"top:0; left:0; bottom:0; right:0;"的部分.

它说,

设置顶部:0; 左:0; 底部:0; 右:0; 为浏览器提供一个新的边界框.此时,块将填充其偏移父级中的所有可用空间,即父体或位置:相对; 容器.Developer.mozilla.org:对于绝对定位的元素,top,right,bottom和left属性指定元素包含块边缘的偏移量(元素相对于的位置).

这是什么意思？包围盒？填写所有可用空间？

"top:0; left:0; bottom:0; right:0;"如何？工作？它是否需要盒子的四个边并伸展它们以填充容器？这是价值观的运作方式吗？

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

我完全迷失在这个解释中,我希望有人能够以更简单易懂的方式对我进行改写,重述和解释.

谢谢.

Answer 1

当您使用会发生什么left和right(或top和bottom)在同一时间是令人困惑,因为规范[ 6.3.绝对定位 ]告诉我们:

对于其包含块基于块级元素的绝对定位元素,此属性是与该元素的填充边缘的偏移量.

那么设置位置如何影响元素的大小？原因在于如何计算宽度,这是在规范的另一部分[8.1.绝对或固定定位,未替换元素的宽度].

如果同时指定left,并right和你的元素width是不能 auto,那么你说的话实在没有意义,而right被忽略(所有语句也同样适用于上/下/高):

如果左/右/宽度都不是自动...值过度约束,则忽略左边的值(如果包含块的方向属性是rtl)或右边(如果方向是ltr)并求解那个价值.

但是,如果您的元素没有设置宽度,或宽度是(默认值)auto,则此规则将启动:

如果width是auto,则left和right不是auto,则求解width.

最后,确定这些元素的值的等式是:

'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 DEMO

Answer 3

您可以使用inset: 0*，这相当于top: 0; right: 0; bottom: 0; left: 0. 所有主流浏览器均支持。

 position: absolute;
 inset: 0;

Answer 4

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

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

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

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