max-width约束的是内容框（content box）的计算宽度，即width属性最终解析出的内容区宽度，不包括padding、border、margin；它在宽度计算中取“理想宽度”与自身值的较小者。
max-width 不会直接改变盒模型的结构，而是对元素的 内容宽度（content width） 施加一个上限约束——它限制的是 width 计算后的最终内容区宽度，且仅在该宽度可能超过设定值时才起作用。
max-width 作用于哪个“宽度”？
它约束的是元素 内容框（content box）的计算宽度，即 CSS 中 width 属性最终解析出的值（不包括 padding、border、margin）。这个值受以下因素共同影响：
- 显式设置的
width（如width: 300px或width: 50%） - 元素内部内容的自然宽度（例如长文本、大图片）
- 父容器可用宽度（尤其在百分比或
fit-content场景下） - 盒模型模式（
box-sizing: border-box不影响 max-width 的作用对象，它仍管 content 宽度）
max-width 如何参与宽度计算？
浏览器按如下逻辑确定最终内容宽度：
- 先根据
width、内容、父容器等算出一个“理想宽度” - 再将该值与
max-width比较：取二者中 较小者 作为实际内容宽度 - 若未设置
max-width，或设为none，则不限制
例如：width: 80%; max-width: 600px; 表示“占父容器 80%，但最多不超过 600px”——当父容器宽度 ≥ 750px 时，实际宽度卡在 600px；父容器更窄时，则按比例缩小。
立即学习“前端免费学习笔记（深入）”；
和 box-sizing 的关系容易被误解
box-sizing: border-box 会让 width 包含 padding 和 border，但 max-width 依然只限制 content 宽度部分。也就是说：
- 设置
width: 400px; padding: 20px; border: 5px solid; box-sizing: border-box;→ content 宽度 = 400 − 40 − 10 = 350px - 此时若加
max-width: 300px;，则 content 宽度会被压到 300px，总占用空间变为 300 + 40 + 10 = 350px（而非原来的 400px）
可见，max-width 始终锚定 content 区，和 box-sizing 如何分配空间无关。
常见失效场景与原因
max-width 看似简单，但常因以下情况“不起作用”：
-
white-space: nowrap+ 长连续无空格文本：内容强制不换行，撑开容器，max-width 仍生效，但内容溢出（需配合overflow控制） - 浮动（float）或绝对定位（position: absolute）元素：脱离文档流，其宽度计算逻辑独立，max-width 仍有效，但不再影响父容器高度或兄弟布局
- 表格单元格（
）：表格算法有特殊宽度处理规则， max-width可能被忽略或降级为建议值- flex 或 grid 子项未设
min-width: 0：默认min-width: auto会阻止收缩，导致 max-width 无法体现（需显式重置） - flex 或 grid 子项未设
