为何CSS相对定位父元素中height:auto生效但width:auto不生效？

先看你给出的代码：

CSS代码 #

body {
  margin: 0;
  padding: 0;
}

.a {
  position: relative;
  background: #ff9999;
  top: 10px;
  height: auto;
  width: auto;
}

.b {
  position: relative;
  background: blue;
  top: 10px;
  height: 50px;
  width: 50px;
}

HTML代码 #

<div class="a">
  <div class="b"></div>
</div>

下面直接解释两种position值下的表现差异：

1. position:relative时的表现 #

.a是div元素，默认属于块级元素，哪怕设置了position:relative，它的块级元素特性并没有改变：

• height:auto：块级元素的高度默认由内部流内容的高度决定，所以会自动适配子元素.b的50px高度，这是正常的流布局行为。
• width:auto：块级元素的宽度默认规则是撑满包含块的可用宽度（这里包含块是body），所以不管子元素多宽，它都会占满整行，这和position:relative无关，是块级元素的固有属性。

如果想让.a的宽度也收缩适配子元素，只需要把它的显示类型改成非块级，比如设置display:inline-block或者display:inline-flex，此时width:auto就会根据内容宽度来计算。

2. position:absolute时的表现 #

当设置position:absolute后，元素会脱离正常文档流，此时它的尺寸计算规则完全改变：

• 绝对定位元素在没有指定top/right/bottom/left这四个偏移属性时，它的width/height:auto都会收缩包裹内部内容，也就是完全适配子元素.b的50px×50px尺寸。
• 这是因为绝对定位元素不再遵循块级元素的流布局规则，它的尺寸由内部内容和包含块共同决定，当没有偏移限制时，就会自适应内容大小。

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