max-width在content-box下仅限制内容区宽度，总宽= max-width + 内边距 + 边框；在border-box下限制整体占位宽，内容区= max-width − 内边距 − 边框；flex/grid中还受弹性行为影响。
max-width 在 content-box 下的计算逻辑
当 box-sizing 为默认值 content-box 时，max-width 仅限制内容区域（content）的最大宽度，不包含 padding、border 和 margin。
浏览器先根据 max-width 确定内容区上限，再向外叠加 padding 和 border，最终总宽度 = max-width + 左右 padding + 左右 border。
- 若设
max-width: 200px、padding: 10px、border: 2px solid，元素实际占用水平空间至少为224px - 当父容器宽度不足时，该元素可能溢出或触发滚动（取决于
overflow） -
width: auto且内容撑开时，max-width才生效；若显式设了width且大于max-width，则以max-width为准
max-width 在 border-box 下的计算逻辑
当 box-sizing: border-box 时，max-width 限制的是整个盒模型的最外边界（content + padding + border），即“占位宽度”的上限。
此时 padding 和 border 会从 max-width 中内减，内容区自动收缩以腾出空间。
立即学习“前端免费学习笔记（深入）”；
- 同样设
max-width: 200px、padding: 10px、border: 2px solid，内容区最大只能是176px（200 − 2×10 − 2×2） - 内容文字多时可能换行更早，或触发内部溢出（如
white-space: nowrap下文字截断） - 注意：
margin始终不参与盒模型计算，无论哪种box-sizing，它都额外增加布局空间
常见误判场景：flex / grid 容器中的 max-width 行为
在 display: flex 或 display: grid 的子项上设置 max-width，其约束对象仍是该子项自身的盒模型，但受父容器主轴尺寸和弹性行为影响，表现易被误解。
- flex 子项默认
flex-shrink: 1，即使设了max-width，仍可能被压缩到小于该值（除非加flex-shrink: 0） - grid 子项若用
fr单位定义列宽，max-width仅在剩余空间足够时生效；空间不足时会被忽略 - 验证是否生效，可临时加
outline: 1px solid red查看实际渲染宽度，而非依赖开发者工具中显示的computed width
调试建议：用 calc() 显式拆解边界
当需要精确控制某类设备下的最大占位宽度（例如移动端卡片不能超过屏幕减去左右边距），直接写 max-width: calc(100vw - 32px) 比依赖盒模型推算更可靠。
尤其在混合使用 border-box 和 content-box 的遗留项目中，calc() 能绕过盒模型差异，直击布局目标。
/* 示例：确保卡片在任何 box-sizing 下都不超出视口减去两侧 16px 边距 */ .card { max-width: calc(100vw - 32px); box-sizing: border-box; /* 保持 padding/border 内收 */ padding: 12px; border: 1px solid #ccc; }盒模型本身不改变 max-width 的语义，但它彻底改变了“这个宽度到底管哪一段”的答案。很多响应式断点失效，根源不是媒体查询写错，而是没意识到 max-width: 768px 在不同 box-sizing 下对应的实际布局宽度差了几十像素。