[!info] related notes

• 所属 MOC: CSS MOC
• 前置概念: 盒模型
• 相关问题: CSS 尺寸单位与响应式尺寸

box-sizing

box-sizing 是盒模型里最容易被低估、但实际开发里非常关键的属性。

一句话定义

box-sizing 决定 width 和 height 计算时，到底只包含内容区，还是把 padding 和 border 也一起算进去。

两个最重要的值

content-box

默认值。

这时：

• width 只表示内容区宽度
• padding 和 border 会额外把盒子撑大

border-box

这时：

• width 包含内容区、padding 和 border
• 更符合组件和布局开发时的直觉

为什么现代项目常用 border-box

因为它能显著降低布局计算心智负担。

例如一个卡片写：

.card {
  width: 240px;
  padding: 16px;
  border: 1px solid #ddd;
}

如果是 content-box，实际占用宽度会大于 240px；如果是 border-box，整体宽度就仍然是 240px。

常见最佳实践

现代项目里常见的全局设置是：

*,
*::before,
*::after {
  box-sizing: border-box;
}

这样大多数布局都会更稳定。

最短记忆方式

content-box 让 padding 和 border 往外长，border-box 让它们往里算。

Related notes

• CSS MOC