CSS box-sizing属性

box-sizing属性决定元素的总宽高如何计算，是理解盒模型的关键。

语法

.box {
  box-sizing: content-box | border-box;
}

content-box（默认值）

宽高只包含内容区域，padding 和 border 额外增加：

.box {
  box-sizing: content-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
}

/* 实际宽度 = 200 + 20*2 + 5*2 = 250px */

border-box

宽高包含 padding 和 border：

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
}

/* 实际宽度 = 200px（固定不变） */
/* 内容区域 = 200 - 20*2 - 5*2 = 150px */

对比

全局设置

推荐全局使用 border-box：

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

注意：使用 border-box 可避免宽高计算混乱，是现代布局的标准做法。

要点总结

• content-box 宽高仅指内容区域
• border-box 宽高包含 padding 和 border
• 推荐全局设置 border-box 简化布局计算
• box-sizing 不影响 margin 的计算

存放路径：articles/CSS/入门/CSS盒模型/CSS box-sizing属性.md