宽度属性

最后更新：2026-09-13

width 宽度属性

width 属性用于设置元素内容区的宽度，是 CSS 盒模型中最常用的尺寸属性之一。它只影响非替换元素（non-replaced elements），默认值 auto 让浏览器根据包含块自动计算宽度。实际开发中常配合 max-width、min-width 实现响应式布局。

分类
初始值	auto
继承	否
适用于	non-replaced
可动画	length
CSS 版本	CSS1
状态	标准

📝 语法

width: auto | <length> | <percentage> | min-content | max-content | fit-content | fit-content(<length-percentage>);

⚙️ 取值

值	类型	描述
`auto`	关键字	浏览器自动计算宽度
`<length>`	类型	固定长度值，如 16px、2em
`<percentage>`	类型	相对于包含块的百分比
`max-content \| min-content \| fit-content`	关键字	根据内容自动计算的关键字

▶ 示例

编辑下方代码，在 playground 中查看实时效果：

▶ 试一试

🌐 浏览器支持

浏览器	Chrome	Edge	Firefox	Safari	Opera
width	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
所有主流浏览器均支持

提示： 默认 width:auto 对块级元素会占满父容器宽度，对行宽元素则由内容撑开。

注意： width 不包含 padding 和 border，除非设置 box-sizing:border-box。

❓ 常见问题

Qwidth:100% 和 width:auto 有什么区别？

Awidth:100% 让内容区严格等于父容器宽度，再添加 padding 或 border 时，元素总宽会超出父容器；width:auto 则会自动扣除 padding 和 border，让元素整体正好填满父容器。简单说：100% 固定内容区，auto 让总宽自适应，两者在带内边距的盒子上差异明显。

Q如何让宽度随内容自适应？

A可以使用内容驱动关键字：width:max-content 让宽度等于内容不换行时的最大宽度；width:min-content 取内容中最长单词或最小单元的宽度；width:fit-content 介于两者之间，内容不够宽时按内容、空间不足时收缩。注意这三个关键字需要浏览器支持，移动端部分旧浏览器需加前缀或回退方案。

Qwidth 的百分比是相对于谁的？

Awidth 的百分比相对于包含块（containing block）的内容区宽度计算。普通文档流元素的包含块是父元素内容区；absolute 元素的包含块是最近定位祖先的 padding box；fixed 元素则是视口。所以子元素 width:100% 并不是父元素整个宽度，而是其内容区宽度。

Q如何让图片自适应不超出容器？

A标准写法是 img { max-width:100%; height:auto; }。max-width:100% 保证图片在容器变窄时等比缩小、不溢出；height:auto 让高度按原始比例自动计算，避免拉伸变形。这比单独用 width:100% 更安全，因为 width:100% 会把小图强制放大失真。