position absolute与fixed块级元素的尺寸规则为何异于常规block元素？

这是个非常常见的CSS疑惑，本质是普通流块级元素和绝对定位元素的宽度计算逻辑完全不同，我来拆解一下：

1. 普通流块级元素的宽度规则 #

正常流中的display:block元素（非根元素），当width为默认值auto时，会自动“填充”父元素的可用宽度。这是因为CSS的盒模型规则中，这类元素的左右margin会被自动拉伸，把整个元素的宽度撑满父容器的内容区——简单说就是“父容器有多宽，我就有多宽”。

2. 绝对定位元素的宽度规则 #

当元素设置position:absolute后，它会完全脱离正常文档流，此时它的宽度计算逻辑发生了变化：

• 绝对定位元素的width:auto不再是填充父容器，而是收缩包裹内容，表现得和inline-block类似，宽度刚好能容纳内部的文本或子元素。
• 它的包含块是最近的非static定位的父元素，但这只是确定了它的定位基准，并不会让它自动继承父元素的宽度。

示例对比 #

<!-- 普通块级元素：红色div会占满.container的宽度 -->
<div class="container"> 
  <div style="background: red;"> 1 </div> 
</div> 

<!-- 绝对定位块级元素：红色div宽度仅包裹文本“1” -->
<div class="container" style="position: relative;"> 
  <div style="position: absolute; background: red;"> 1 </div> 
</div>

如何让绝对定位元素占满父容器？ #

如果需要绝对定位元素撑满父容器的宽度，有两种常用方法：

• 显式设置width: 100%，直接继承父容器的宽度
• 设置left: 0; right: 0，此时元素会自动拉伸，填充包含块的左右边缘，无需额外设置width

内容的提问来源于stack exchange，提问作者Murad Sofiyev