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

Question

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

我阅读了CSS代码，

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

我也看了解释。

但是我不明白的是解释“top: 0; left: 0; bottom: 0; right: 0;”的部分。

它说，

Setting top: 0; left: 0; bottom: 0; right: 0; gives the browser a new bounding box for the block. At this point the block will fill all available space in its offset parent, which is the body or position: relative; container. Developer.mozilla.org: For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element’s containing block (what the element is positioned relative to).

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

如何“上:0；左:0；下:0；右:0；”工作？它是否需要一个盒子的 4 个边并拉伸(stretch)它们以填充容器？值(value)观是这样运作的吗？

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

我完全迷失在这个解释中，我希望有人以更简单易懂的方式重新措辞、重申并向我解释。

谢谢。

Answer 1

当您在 处使用 left 和 right(或 top 和 bottom)时会发生什么同样时间令人困惑，因为规范[6.3. Absolute positioning ] 告诉我们:

For absolutely positioned elements whose containing block is based ona block-level element, this property is an offset from the paddingedge of that element.

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

如果您同时指定了 left 和 right 并且您的元素的 width 不是 auto，那么你说的真的没有意义，right 被忽略(所有语句同样适用于 top/bottom/height):

If none of left/right/width is auto...the values are over-constrained, ignorethe value for left (in case the direction property of the containingblock is rtl) or right (in case direction is ltr) and solve for thatvalue.

但是，如果您的元素没有设置宽度，或者宽度是(默认)auto，则此规则生效:

If width is auto, left and right are not auto, then solve for width.

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

'left' + 'margin-left' + 'border-left-width' + 'padding-left' +'width' + 'padding-right' + 'border-right-width' + 'margin-right' +'right' = width of containing block

我们可以清楚地看到，在插入我们的 left 和 right 以及其他值之后，width 是 Unresolved (且不受约束的)变量，结果将是 包含框的宽度 - 左 - 右(或多或少)或换句话说:“填充偏移量之间的空间”。