max-width仅在计算出的width大于其值时生效，如width:50%在父宽1600px时得800px才被max-width:600px截断；窄屏需配合媒体查询或min()函数。
width 设为百分比时 max-width 为何没生效
常见现象是 width: 50% 搭配 max-width: 600px，但元素始终撑满父容器，不卡在 600px。根本原因是：当父容器宽度小于 600px（比如 400px），width: 50% 算出来是 200px，它本身就没超过 max-width，自然不会触发限制。
真正起作用的场景是父容器足够宽——比如父容器 1200px，此时 50% 就是 600px，刚好触顶；若父容器 1600px，50% 是 800px，才被 max-width: 600px 截断。
-
max-width只在计算出的 width > max-width 时生效 - 想让窄屏也受控，得配合
min-width或媒体查询，或改用width: fit-content+max-width - 注意 box-sizing：默认
content-box下，padding 和 border 会额外撑大总尺寸，可能突破 max-width
移动端适配中 max-width 常见误用
很多人写 max-width: 100%，以为能防止溢出，其实这是无效写法——max-width: 100% 等价于“最大不超过父容器 100%”，而 width 默认就是 auto（即尽可能撑满），等于没设限。
真正要防溢出，应该：max-width: 100% + width: fit-content（内容自适应）或 width: 100%（强制占满但不超）。
立即学习“前端免费学习笔记（深入）”；
- 图片自适应推荐：
width: 100%; max-width: 100%; height: auto; - 卡片类容器建议：
width: 100%; max-width: 768px; margin: 0 auto;，这样小屏铺满、大屏居中且不超宽 - 避免同时设
width: 100%和max-width: 100%——后者完全冗余
flex 容器里 width 和 max-width 的优先级冲突
在 display: flex 的父容器中，子项的 width 和 max-width 可能被 flex 自动调整覆盖。例如子项设了 width: 200px; max-width: 300px，但父容器空间不足时，flex 仍可能压缩它到 150px；空间富余时，又可能拉伸超 300px（取决于 flex-grow）。
- 解决办法：加
flex-shrink: 0防止压缩，加flex-grow: 0防止拉伸 - 更稳妥写法：
flex: 0 0 auto;+width: 100%; max-width: 480px; - 注意：flex 子项的
max-width在主轴方向才有效，交叉轴要用align-self或容器align-items控制
width: min(100%, 600px) 比传统写法更直接
CSS clamp() 和 min()/max() 函数出现后，很多场景不再需要 width + max-width 组合。比如 width: min(100%, 600px) 表示“取 100% 和 600px 中较小值”，语义清晰、无依赖、不需考虑 box-sizing 影响。
- 兼容性：Chrome 79+、Firefox 75+、Safari 14.1+ 支持
min()；IE 不支持 - 替代旧写法：
width: 100%; max-width: 600px;→width: min(100%, 600px); - 进阶用法：
width: min(100vw, 600px);直接基于视口，避免嵌套层级影响
实际项目中，如果目标环境支持，min() 是更干净的选择；但老项目维护时，仍得小心处理 box-sizing 和 flex 的隐式行为——这些细节不报错，却会让布局在某些设备上悄悄偏移。
