盒模型尺寸属性
最后更新：2026-09-13
box-sizing 盒模型尺寸属性
box-sizing 属性决定 width 和 height 的计算方式，是理解 CSS 盒模型的关键。默认值 content-box 只包含内容区，padding 和 border 会额外增加元素尺寸；border-box 则把 padding 和 border 包含在 width/height 内，更直观易用。现代项目普遍采用 border-box 作为全局默认值。
| 分类 | |
|---|---|
| 初始值 | content-box |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | discrete |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
box-sizing: content-box | border-box;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
content-box | 关键字 | 宽高仅含内容区（默认） |
border-box | 关键字 | 宽高含内容+内边距+边框 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| box-sizing | ✓ v10 | ✓ v12 | ✓ v29 | ✓ v5.1 | ✓ v7 |
| 所有主流浏览器均支持 | |||||
提示： 推荐全局设置 *{box-sizing:border-box}，让所有元素的宽高计算方式统一，避免布局混乱。
❓ 常见问题
Qcontent-box 和 border-box 有什么区别？
Acontent-box（默认）下 width 只指内容区，padding 和 border 加在尺寸之外，需手动计算；border-box 下 width 已含 padding 和 border，设定宽度就是最终可见宽度，内容向内挤压。border-box 更直观，现代项目普遍全局启用。
Q为什么大家都推荐用 border-box？
Aborder-box 让布局计算更简单：写的 width:200px 就是元素实际占用的宽度，padding 和 border 向内压缩，不会因加内边距让盒子变宽挤乱布局。尤其做百分比宽度 + 固定 padding 的响应式布局时可避免溢出，故推荐全局设 *{box-sizing:border-box}。
Q如何全局设置所有元素为 border-box？
A在 CSS 开头加：* , *::before, *::after { box-sizing:border-box; }，让所有元素和伪元素都使用 border-box。注意：若第三方组件（如表单控件）依赖 content-box 默认行为，全局覆盖可能改变其显示，必要时对特定组件单独改回 content-box。
Q哪些元素默认就是 border-box？
A多数浏览器中，部分表单控件（input、textarea、select、button）默认就是 border-box，如 input 的高度包含边框。其余元素默认 content-box。不同浏览器对表单控件的默认 box-sizing 曾有差异，这也是 UI 框架普遍在重置样式中统一 box-sizing 的原因。
🏷️ 相关属性
💡 相关案例
📚 相关教程
