css box-sizing属性是控制元素盒模型计算方式的重要属性，它定义了浏览器应该如何计算一个元素的总宽度和总高度，避免开发者在设置尺寸时因为内边距和边框的额外占用出现布局偏差。
box-sizing属性的可选值
box-sizing属性目前主要有两个常用的可选值，不同的取值对应不同的盒模型计算规则：
- content-box：默认值，采用标准盒模型计算方式。元素的宽度和高度仅包含内容区域，内边距和边框会额外增加到元素的总尺寸上。
- border-box：采用替代盒模型计算方式。元素的宽度和高度包含内容区域、内边距和边框，设置的内边距和边框不会让元素超出预设的尺寸范围。
两种取值的效果对比
我们可以通过实际的代码示例来直观看到两种取值的差异，首先定义两个基础样式相同的div元素：
/* 两个div基础样式相同 */
.div-base {
width: 200px;
height: 100px;
padding: 20px;
border: 5px solid #333;
margin: 10px;
background-color: #f0f0f0;
}
/* 第一个div使用默认content-box */
.div-content {
box-sizing: content-box;
}
/* 第二个div使用border-box */
.div-border {
box-sizing: border-box;
}
对应的html结构如下：
<div class="div-base div-content">content-box效果</div> <div class="div-base div-border">border-box效果</div>
此时两个div的表现差异如下：
| 属性取值 | 内容区域宽度 | 总宽度计算 | 实际占用宽度 |
|---|---|---|---|
| content-box | 200px | 200 + 20*2 + 5*2 = 250px | 250px |
| border-box | 200 - 20*2 -5*2 = 150px | 200px（已包含padding和border） | 200px |
常见使用场景
全局重置使用border-box
很多项目会在样式初始化时全局设置box-sizing为border-box，这样可以让所有元素的尺寸计算更符合直觉，避免后续布局时反复调整尺寸：
/* 全局设置border-box，继承让表单元素也生效 */
*,
*::before,
*::after {
box-sizing: border-box;
}
表单元素适配
表单元素的默认盒模型通常是content-box，当给输入框设置宽度和内边距时很容易超出父容器，给表单相关元素单独设置border-box可以解决这类问题：
input, textarea, select {
box-sizing: border-box;
width: 100%;
padding: 8px 12px;
border: 1px solid #ddd;
}
注意事项
使用box-sizing属性时需要注意，margin（外边距）始终不会被包含在元素的宽度和高度计算中，无论box-sizing取什么值，外边距都会额外占用布局空间。另外该属性是css3新增属性，在非常老旧的浏览器（如IE7及以下）中不被支持，如果需要兼容这类浏览器则不能使用该属性。
cssbox-sizingbox_model修改时间：2026-06-12 15:54:13