width与max-width结合时，元素宽度以width为准但不超过max-width。常用于响应式图片、居中容器和卡片布局，配合box-sizing:border-box更易控制尺寸，实现弹性且不失真的自适应效果。
当CSS盒模型中的 width 与 max-width 结合使用时，可以实现更灵活、响应式更强的布局效果。这种组合的核心逻辑是：元素宽度优先使用 width 设置的值，但不会超过 max-width 所限定的最大值。
基本行为解析
浏览器在渲染元素时会同时考虑 width 和 max-width 的设置，最终宽度遵循以下规则：
- 如果
width的值小于等于max-width，则元素使用width指定的宽度。 - 如果
width的值大于max-width，则元素的实际宽度会被限制为max-width的值。 - 若未设置
width，元素宽度可自由增长，但不会超过max-width。
这意味着 max-width 起到“上限保护”作用，防止内容区域在大屏幕上过度拉伸影响可读性。
常见应用场景
这种组合在响应式设计中非常实用，尤其适用于容器、图片和表单元素。
立即学习“前端免费学习笔记（深入）”；
-
图片自适应：设置
width: 100%让图片填充父容器，同时用max-width: 500px防止其在大屏上失真或过大。 -
内容区居中布局：给一个居中的 设置
width: 80%和max-width: 1200px，既能适配小屏幕，又避免在超宽屏幕上文字过长影响阅读。- 卡片组件统一尺寸：多个卡片设置相同
max-width并配合相对宽度，确保视觉一致性。注意事项与盒模型影响
实际宽度计算受
box-sizing属性影响：- 默认
box-sizing: content-box时，width仅指内容区域，不包括 padding 和 border。此时设置的max-width也只限制内容宽度，内外边距会额外增加总占用空间。 - 推荐使用
box-sizing: border-box，这样width和max-width包含 padding 和 border，更容易控制整体尺寸。
例如：
.container { width: 90%; max-width: 600px; margin: 0 auto; box-sizing: border-box; padding: 20px; }这个容器在小屏幕上占父级90%，在大屏幕上最大不超过600px（含内边距），居中显示且不易溢出。
基本上就这些。合理搭配
width与max-width，能让页面在不同设备上都保持良好视觉效果。关键在于明确最大容忍宽度，并让元素在限制内弹性伸缩。 - 卡片组件统一尺寸：多个卡片设置相同
