为form类div设置width:100%的作用及布局规范疑问

1. 是否必须给父容器内所有div设width:100%？相关规则是什么？为啥有的开发者用，有的不用？ #

• 完全没必要。div是默认的块级元素，按照CSS的视觉格式化规则，块级元素的默认width值为auto，会自动填满父容器的可用水平空间（需扣除自身的margin、border、padding）。
• 相关规则：CSS明确规定，未显式设置宽度的块级盒，会通过auto值填充包含块的可用宽度，计算逻辑为父容器宽度 - 自身margin、border、padding的总和。
• 开发者选择不同做法的原因：
  • 使用width:100%的场景：
    • 当div被修改为inline-block、浮动（float）或者绝对/固定定位时，它不再具备默认块级行为，宽度会收缩至内容宽度，此时设置width:100%可让它重新占满父容器。
    • 部分开发者习惯显式声明样式，避免因继承其他display属性或第三方样式导致布局异常。
    • 搭配box-sizing: border-box使用时，显式设置width:100%能确保元素加上padding和border后，仍刚好填满父容器，不会出现溢出。
  • 省略width:100%的场景：
    • 依赖块级元素的默认行为，减少冗余代码，让样式更简洁。
    • 当需要元素宽度随内容自适应时（比如父容器设置了overflow属性，或子元素存在浮动，强制100%宽度反而可能引发布局问题）。

2. 注册表单代码里，wrapper类div下的form类div设width:100%的具体作用？ #

通常wrapper是用于居中表单的容器（比如设置了max-width: 600px; margin: 0 auto;），此时form设置width:100%的作用主要有：

• 让表单完全继承wrapper的可用宽度，确保表单内容不会超出容器范围，维持布局的规整性。
• 如果form被设置为flex这类非默认块级的display属性，显式设置width:100%可保证它占满父容器的水平空间，避免表单内容自动收缩。
• 配合box-sizing: border-box时，即便form有padding或border，也不会超出wrapper的宽度，防止布局溢出。
• 让表单内的子元素（如输入框、按钮）在设置百分比宽度时，以form的宽度为基准，而非更外层容器，使布局层级更清晰，降低出错概率。

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