位置绝对和固定块元素如何获得它们的尺寸？

Question

其实我看到很多这样的问题，但是我找不到这个问题的正常答案，因为我再次打开这个问题。

当我们有块元素（显示：块）时，该元素包含父组件的全宽，如果元素本身是根元素，则该元素宽度占100％。

但是当我们查看块元素（显示：块）但定位绝对元素时，会出现类似内联块元素的工作（类似块元素但宽度未充满父组件）甚至父元素位置相对。

谁能解释一下为什么位置绝对元素和固定元素的宽度不像显示：块元素那样工作。

https://jsfiddle.net/epbkmzh3/28/

    <div class="container">
      <div style="background: red;"> 1 </div>
    </div>
    
    
    <div class="container" style="position: relative;">
      <div style="position: absolute; background: red;"> 1 </div>
    </div>

Answer 1

这里是详细说明如何找到任何元素的宽度/高度的规范：https://www.w3.org/TR/CSS21/visudet.html

从那里你可以阅读绝对元素：

确定这些元素使用值的约束是：

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

然后

如果'left'、'width'和'right'这三个都是'auto'：首先将'margin-left'和'margin-right'的任何'auto'值设置为0。然后，如果建立包含静态位置的块的元素的“方向”属性是“ltr”，将“左”设置为静态位置并应用下面的规则三；否则，将“right”设置为静态位置并应用下面的第一条规则。

还有第三条规则：

'width' 和 'right' 是 'auto' 而 'left' 不是 'auto'，那么 宽度是收缩到适合的 。然后求解'对'

第一条规则也类似

如果您继续阅读，您会发现如何计算 shrink-to-fit 宽度。您还会注意到相同的 shrink-to-fit 算法适用于 float 和 inline-block 元素

---

另请注意，固定元素是绝对元素的特例，因此适用相同的规则。唯一的区别是包含块

固定定位是绝对定位的一个子类别。唯一的区别是对于一个固定定位的盒子，包含块是由视口建立的。 ^ref

---

您还可以看到块元素遵循几乎相同的约束（没有左/右），但the rules are different：

在其他属性的使用值中必须保持以下约束：

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

然后

如果 'width' 设置为 'auto'，则任何其他 'auto' 值都将变为 '0' 并且 'width' 来自结果相等。

这将使width = width of containing block

---

inline-block 元素之间的一个重要区别是绝对元素不会像我们想象的那样占用其内容的宽度。由于上述限制，大多数情况下都会发生这种情况，但请查看以下示例：

.container {
 clear:left;
 margin:5px;
}

<div class="container" style="float:left;position:relative;">
  <div style="display:inline-block; background: red;"> 1 1 1 1 1 1  </div>
</div>

<div class="container" style="float:left;position:relative;">
  <div style="position: absolute; background: red;"> 1 1 1 1 1 1  </div>
</div>

请注意绝对元素将如何包装到尽可能小的尺寸来取消内联块。这是因为包含块也是一个 shrink-to-fit 容器。

相关：Why everything word-wrap inside an absolute element nested inside a float or inline-block element

Answer 2

这是因为absolute 和fixed 定位将元素从文档流中移除。

并且由于这些元素已从文档流中删除，因此没有参考它们应该是什么宽度，因此它们只占用与其内容一样多的空间。

如果它们本质上是块元素（div、p 等），它们仍然是“块”元素，除非通过 CSS 更改显示属性。 为清晰起见编辑：即使显示属性通过 CSS 更改，浏览器仍将计算为 display: block。

以下是有关文档流的一些文档： https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/In_Flow_and_Out_of_Flow

重要的部分：

Taking an item out of flow

All elements are in-flow apart from:

    floated items
    items with position: absolute (including position: fixed which acts in the same way)
    the root element (html)

Out of flow items create a new Block Formatting Context (BFC) and therefore everything inside them can be seen as a mini layout, separate from the rest of the page. The root element therefore is out of flow, as the container for everything in our document, and establishes the Block Formatting Context for the document.