子元素的宽度已更改，但父元素的宽度没有变化，为什么？

Question

reference

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

Answer 1

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

  

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

     

以下约束必须包含在另一个的使用值中   属性：

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

     

如果'width'设置为“自动”，则任何其他“自动”值都会变为“0”和   'width'遵循由此产生的平等。

在这种情况下，

• 未设置width，因此其值为初始auto。
• 水平边距设置为auto。
• 未设置水平border-*-style，因此其值为初始none。因此水平border-*-width计算到0。
• 未设置水平填充，因此它们的值为初始0。

然后，

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