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 s
olid #ccc;
}

盒模型本身不改变 max-width 的语义，但它彻底改变了“这个宽度到底管哪一段”的答案。很多响应式断点失效，根源不是媒体查询写错，而是没意识到 max-width: 768px 在不同 box-sizing 下对应的实际布局宽度差了几十像素。