前言
在 CSS 布局开发中，一个看似微小却影响深远的属性常常被忽视，直到它引发布局错乱、响应式失效或调试数小时仍不得其解——这个属性就是 box-sizing。其中，box-sizing: border-box 被广泛认为是现代 Web 开发的最佳实践之一。
一、CSS 盒模型（Box Model）基础
在 CSS 中，每一个 HTML 元素都被视为一个矩形盒子（box），其空间占用由四个部分组成：
- Content（内容区）：实际文本、图片等内容占据的区域。
- Padding（内边距）：内容与边框之间的空白区域。
- Border（边框）：围绕 padding 的边界线。
- Margin（外边距）：盒子与其他元素之间的外部间距。
这四部分共同构成了 CSS 的盒模型（Box Model）。
1.1 默认盒模型：content-box
根据 CSS 规范（CSS 2.1），所有元素默认使用 W3C 标准盒模型，即 box-sizing: content-box。
在此模式下：
- 当你设置
width: 200px，该值仅作用于 content 区域； - padding 和 border 会额外增加元素的总宽度；
- margin 不计入元素尺寸，但影响布局位置。
示例代码（content-box）：
.box {
width: 200px;
padding: 20px;
border: 5px solid #000;
}
实际渲染宽度计算：
总宽度 = width + (padding-left + padding-right) + (border-left + border-right) = 200px + 40px + 10px = 250px
这种行为虽然符合规范，但在实际开发中常导致'意料之外'的布局溢出，尤其在以下场景中尤为明显：
- 多列布局（如两列各占 50% 宽度）；
- 响应式设计中使用百分比宽度；
- 动态添加 padding 或 border 后布局错位。
二、box-sizing: border-box 的定义与行为
为解决上述问题，CSS3 引入了 box-sizing 属性，允许开发者切换盒模型的计算方式。
2.1 语法与取值
box-sizing: content-box | border-box | inherit;
content-box：默认值，遵循 W3C 标准盒模型。border-box：采用 IE 盒模型（也称'怪异模式盒模型'），但以标准化方式实现。- ：继承父元素的 值。
