最大宽度属性
最后更新：2026-09-13
max-width 最大宽度属性
max-width 属性用于设置元素的最大宽度，防止元素在大屏上过宽影响阅读体验。默认值 none 表示没有最大宽度限制。它是响应式设计的核心工具，常配合 width:100% 让图片等元素自适应但不超过原始尺寸。
| 分类 | |
|---|---|
| 初始值 | none |
| 继承 | 否 |
| 适用于 | non-replaced |
| 可动画 | length |
| CSS 版本 | CSS2 |
| 状态 | 标准 |
📝 语法
max-width: none | <length> | <percentage> | min-content | max-content | fit-content;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
none | 关键字 | 无最大宽度限制 |
<length> | 类型 | 固定最大宽度 |
<percentage> | 类型 | 相对包含块的百分比 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| max-width | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| 所有主流浏览器均支持 | |||||
提示： max-width 优先级高于 width，即使 width 设得更大，实际宽度也不会超过 max-width。
❓ 常见问题
Qmax-width:100% 有什么用？
Amax-width:100% 让元素宽度最大不超过父容器，配合 height:auto 时图片等比缩放且不溢出，是响应式处理媒体元素的标准写法。与 width:100% 的区别：width:100% 强制拉满容器（小图被放大失真），max-width:100% 只在容器比原始尺寸窄时缩小，大图原样显示。
Q如何让内容居中且限制最大宽度？
A设置 max-width 限制宽度上限，再用 margin:0 auto 让元素水平居中，这是最常见的做法。例如文章主体 max-width:800px; margin:0 auto; 后，窄屏上宽度自动收缩，宽屏上保持 800px 并居中。注意要让 margin:auto 生效，元素必须是块级元素且宽度小于可用空间。
Qmax-width 和 width 同时设置哪个生效？
Amax-width 优先。width 超过 max-width 时按 max-width 渲染；width 小于 max-width 时以 width 为准。三者优先级：min-width > max-width > width，所以 max-width 只能在 width 之上做上限，无法小于 min-width。
Qmax-width 可以用百分比吗？
A可以。max-width 接受长度、百分比以及内容关键字，百分比相对于包含块的宽度计算，例如 max-width:80% 表示不超过父容器宽度的 80%。也支持 min-content、max-content、fit-content 等关键字，可根据内容自动决定上限。
🏷️ 相关属性
💡 相关案例
📚 相关教程
