max-width 仅约束内容区宽度，实际占位=内容宽+padding+border；默认 content-box 下易溢出，改用 border-box 可使 max-width 包含 padding 和 border。
max-width 本身不“出错”，它始终按 content-box 规则计算 —— 你写的 max-width: 400px，永远只管内容区宽度，padding 和 border 是额外加上的。 所以不是 max-width 错了，而是你默认以为它约束的是“整个盒子”，结果 padding 一加，实际占位就超了。
max-width: 400px 实际占多少？取决于 box-sizing
浏览器默认用 box-sizing: content-box，此时：
-
max-width: 400px+padding: 16px+border: 1px→ 实际最大总宽 = 400 + 32 + 2 = 434px - 如果父容器刚好
width: 420px，子元素必然溢出或触发水平滚动条 - 换成
box-sizing: border-box后，max-width: 400px就真指“内容+padding+border ≤ 400px”，内容区自动压缩
为什么媒体查询里 max-width 断点会提前触发？
常见于响应式布局中：你写 @media (max-width: 768px)，但页面在 750px 就崩了。原因往往是：
- 某个容器设了
max-width: 768px，但内部元素带padding: 24px且没用border-box，导致内容区只剩 720px 就撑满 - 表单控件（如
<input>）自带padding和border，width: 100%+max-width: 100%在 content-box 下几乎必超 - Flex 子项用了
flex-basis: 300px又加padding: 12px，实际占位 324px，整行宽度预估失效
第三方组件库干扰下，max-width 表现不一致
像 Ant Design、Element Plus 等库会重置部分元素的 box-sizing，但往往只作用于组件内部，不穿透到你的自定义 wrapper 上：
立即学习“前端免费学习笔记（深入）”；
- 你给外层
.form-wrapper设了max-width: 600px，里面放一个<el-input>，它可能自带box-sizing: border-box，但 wrapper 自身仍是content-box - Shadow DOM 或 CSS-in-JS（如 styled-components）中，
* { box-sizing: border-box }无效，必须在对应 scope 内显式声明 - 检查方式：选中元素 → Chrome DevTools 的 “Computed” 面板 → 搜
box-sizing，看值是否被划掉；再看max-width对应的 “Layout Width” 是否明显大于声明值
真正麻烦的从来不是 max-width 这个属性，而是它和 box-sizing、padding、display 类型混在一起时，人脑没记住浏览器到底按哪条规则算的。
