html - 子元素的宽度改变了，但是父元素的宽度没有改变，为什么？

Question

reference

在这个页面中，当.gridster > ul的宽度改变时，.gridster的宽度不变。通常，父元素的宽度会随着子元素宽度的变化而变化。为什么在这种情况下保持不变。如何让父元素的宽度始终等于子元素的宽度。

Answer 1

因为.gridster是 block 级非替换元素。

10.3 Calculating widths and margins
10.3.3 Block-level, non-replaced elements in normal flow

The following constraints must hold among the used values of the other properties:

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

If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.

在这种情况下，

• 未设置宽度，所以它的值为初始auto。
• 水平边距设置为自动。
• 横向的border-*-style没有设置，所以它们的值是初始的none。因此水平 border-*-width 计算为 0。
• 没有设置水平填充，所以它们的值是初始的0。

然后，

• 水平边框和填充保持 0。
• 水平边距计算为 0，因为 width 是 auto。
• width 计算出 containing block 的宽度.