box-sizing 是 CSS 的一个非常重要的属性。

CSS 的 box-sizing 属性用于控制元素尺寸的计算方式，决定了元素的宽度（ width ）和高度（ height ）是否包含内边距（ padding ）和边框（ border ）。这是 CSS 盒子模型的核心概念之一。

两种主要的值：

1. content-box （默认值）

• 宽度和高度仅包含内容区域。
• 添加 padding 或 border 会增加元素的总尺寸。
• 计算公式：

总宽度 = width + padding-left + padding-right + border-left + border-right

总高度 = height + padding-top + padding-bottom + border-top + border-bottom

示例：

.box {

width: 200px;

padding: 20px;

border: 5px solid black;

box-sizing: content-box; /* 默认值 */

}

• 实际总宽度 = 200px （内容宽） + 20px×2 （内边距） + 5px×2 （边框） = 250px。

2. border-box （推荐值）

• 宽度和高度包含内容、内边距和边框。
• 添加 padding 或 border 会挤压内容区域，但元素总尺寸不变。
• 计算公式：

内容宽度 = width - padding-left - padding-right - border-left - border-right

内容高度 = height - padding-top - padding-bottom - border-top - border-bottom

示例：

.box {

width: 200px;

padding: 20px;

border: 5px solid black;

box-sizing: border-box; /* 推荐值 */

}

• 实际总宽度 = 200px（直接包含内容、内边距和边框）。
• 内容区域宽度 = 200px - 20px×2 - 5px×2 = 150px。

为什么推荐使用 border-box？

• 直观布局：设置 width: 100% 时，元素不会因添加 padding/border 而意外超出父容器。
• 简化计算：无需手动调整宽度来抵消 padding 和 border 的影响。
• 响应式友好：更易控制元素在容器中的精确占比。

实际应用建议：

全局设置为 border-box （常见最佳实践）：

* {

box-sizing: border-box; /* 所有元素继承此计算方式 */

}

示意图：

┌────────────────────┐

│ margin │

│ ┌─────────────────┐ │

│ │ border │ │

│ │ ┌──────────────┐ │ │

│ │ │ padding │ │ │

│ │ │ ┌───────────┐ │ │ │

│ │ │ │ content │ │ │ │

│ │ │ └───────────┘ │ │ │

│ │ └─────────────┘ │ │

│ └─────────────────┘ │

└────────────────────┘

• content-box ：仅蓝色区域（content）计入 width/height 。
• border-box ：蓝色 + 绿色 + 橙色区域（ content + padding + border ）计入 width/height 。

注意： box-sizing 不影响外边距（ margin ），它始终在总尺寸之外。

爱学习的小伙伴，更多精彩，关注不迷路哟～