CSS布局中已设置max-width时为什么还需要额外设置width属性？

两种写法的效果并不完全等价，添加width: 100%是为了覆盖更多通用布局场景，避免异常表现：

• 非默认块级元素的适配问题
  正常流中的默认块级元素width初始值为auto，会自动撑满父容器可用宽度，这种场景下仅设置max-width: 800px确实能达到相近效果。但如果元素是inline-block、flex/grid子项、替换元素（如img、input），默认宽度由内容本身决定，仅设max-width只会限制最大宽度，元素不会主动撑满父容器，会出现内容较少时宽度过小的问题。添加width: 100%后可以强制元素先占满父容器可用宽度，再被max-width限制上限。
• 盒模型与布局一致性问题
  当元素设置了padding、border且开启box-sizing: border-box时，width: 100%会明确将盒模型总宽度限制为父容器宽度，避免默认width: auto在栅格列、嵌套浮动容器等特殊布局中出现的宽度计算异常。同时在响应式布局中，这种写法可以统一适配所有视口尺寸，无需根据元素类型额外调整样式。

举个常见的实际案例：
给响应式图片设置样式时，如果仅写max-width: 800px，当父容器宽度为600px、图片原始尺寸为400px时，图片只会显示400px宽，无法撑满父容器；加上width: 100%后，图片会自动适配到600px宽，当父容器宽度超过800px时，图片最多显示为800px，完全符合响应式设计的预期。

如果你的使用场景明确是正常流中的普通块级元素，不存在上述特殊情况，仅写max-width也可以正常运行，加width: 100%属于更稳妥的通用兼容写法。

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