元素最终渲染宽度取width与max-width的较小值，受box-sizing影响：content-box下width仅含内容区，border-box下width含padding和border；未设width时max-width不主动拉伸，仅限制上限。
width 和 max-width 的实际计算逻辑
浏览器渲染时，width 是首选值，max-width 是硬性上限。两者共存时，最终宽度取 min(width, max-width) —— 不是“叠加”，也不是“覆盖”，而是实时比较后取小值。
常见误解是认为写了 width: 80% 就一定生效，其实如果父容器宽 2000px，80% 算出来是 1600px，但若 max-width: 1200px，那最终就是 1200px；反过来，父容器只有 400px，80% = 320px，max-width 不触发，就用 320px。
-
width: auto时，max-width仍有效，此时元素按内容或父容器撑开，但不会突破上限 - 未设
width时，max-width不会主动“拉伸”元素，只起限制作用 -
max-width: 100%是相对于包含块（不是视口），若父级没宽，它也无效
box-sizing: border-box 是必须加的吗
必须加，否则 width 和 max-width 只管内容区，padding 和 border 会额外撑出尺寸，导致实际占用宽度超标，尤其在居中布局里容易溢出或错位。
比如：.card { width: 90%; max-width: 600px; padding: 20px; }，默认 box-sizing: content-box 下，600px 是内容宽，加上左右各 20px padding，总宽达 640px —— 超出预期。
立即学习“前端免费学习笔记（深入）”；
- 全局重置推荐：
* { box-sizing: border-box; } - 单独设置更稳妥：
.card { box-sizing: border-box; width: 90%; max-width: 600px; padding: 20px; } - 不用
box-sizing也能 work，但需手动从max-width中扣减 padding/border，易出错且难维护
什么时候该用 max-width: 100% 而不是固定值
max-width: 100% 不是“响应式万能解”，它只在一种场景真正必要：防止窄屏下内容被父容器裁切，比如模态框、弹窗内层、全宽 Banner 里的文字块。
但它不解决大屏过宽问题 —— 因为它是相对父容器算的，如果父容器本身没约束（比如 body 宽 1920px），max-width: 100% 就等于 1920px，毫无意义。
- 正确用法：
.modal-content { width: 100%; max-width: 100%; }+ 父级.modal { max-width: 500px; } - 错误用法：
.main { max-width: 100%; }—— 和只写width: 100%效果一样，无实际限制 - 替代方案：优先用
max-width: 1200px这类设计锚点，再配合媒体查询微调
按钮和卡片这类组件怎么设才不踩坑
按钮和卡片对 width/max-width 组合最敏感，小屏溢出、大屏过宽、文字换行错乱，往往就差一个参数没对齐。
典型错误是给按钮同时设 width: 100% 和 min-width: 160px —— 小屏下 min-width 强制生效，按钮撑破父容器；或者漏掉 box-sizing: border-box，导致 padding 把按钮顶出去。
- 卡片推荐写法：
.card { width: 100%; min-width: 280px; max-width: 400px; box-sizing: border-box; } - 按钮推荐写法：
.btn { width: 100%; max-width: 280px; box-sizing: border-box; }，避免用min-width，改用内容长度自然撑开或媒体查询控制 - 所有带
width: 100%的元素，父容器必须有明确宽度约束（如max-width或width），否则百分比失去参照
真正麻烦的不是怎么写，而是忘记检查父级是否“干净”——一个没设 max-width 的 wrapper，会让所有子元素的 max-width 形同虚设。每次调样式前，先看一眼父容器的盒模型和宽度来源，比反复调参更省时间。
