css - 为什么当位置设置为固定时 div 会调整大小？

Question

这听起来微不足道，但我很想知道为什么会这样。我有以下代码:

.fixed {
  position : fixed;
  border : 1px solid black;
  padding : 5px;
  right : 0;
  bottom : 0;
}

<div class="fixed">
I am just a fixed value
</div>

为什么不指定position:fixed属性时，div两端都被拉宽了。当与定位属性一起指定时，Where as 会缩小到内容的大小。

Answer 1

默认情况下，元素的位置是静态的。由于 div 是一个 block 元素，它从它的父级继承宽度，因此它在父级的限制内被拉伸(stretch)。

当一个元素被定位时，它就脱离了元素的常规流，因此它不能从它的父元素继承任何维度(在这种情况下是宽度)。

考虑到您的示例，当未定位 div 时，它将继承其父级的宽度，因此它具有一定的尺寸。当您向样式添加 position:fixed 时，它已脱离常规流程，因此无法继承任何维度。任何尺寸都将基于您在 css 规则中定义的值或其内容占用的默认宽度。

position:absolute 也是如此。