在css布局过程中，给元素设置边框是很常见的操作，但很多开发者会发现，添加边框后元素的整体尺寸会超出预期，原本设计好的排版比例被打乱，甚至出现元素换行、布局错位的情况。这是因为默认情况下浏览器的尺寸计算规则会把边框和内边距算在元素总尺寸之外，导致实际占用的空间比设置的width和height更大。
默认尺寸计算规则的问题
css默认的盒模型是content-box，在这种规则下，元素的宽度和高度只计算内容区域的尺寸，边框（border）和内边距（padding）会额外增加到总尺寸上。比如我们给一个元素设置宽度为100px，左右边框各1px，左右内边距各10px，那么这个元素实际占用的水平空间就是100 + 1*2 + 10*2 = 122px。
假设我们有一个容器宽度是300px，里面放三个宽度100px的浮动元素，每个元素加1px边框，按照默认规则三个元素的总宽度就是(100+2)*3=306px，超过了容器宽度，第三个元素就会被挤到下一行，导致排版比例完全不符合预期。
box-sizing属性的作用
box-sizing属性用来改变浏览器的盒模型计算方式，它有两个常用取值：
- content-box：默认值，宽度和高度只作用于内容区域，边框和内边距额外增加总尺寸。
- border-box：宽度和高度作用于内容、内边距和边框的总和，设置width后，边框和内边距会从内容区域扣除，不会增加总尺寸。
当把元素的box-sizing设置为border-box后，上面的例子里三个带边框的元素总宽度就是100*3=300px，刚好填满容器，不会出现排版错位的问题。
box-sizing的实际使用示例
我们可以通过简单的代码示例来直观看到两种盒模型的差异：
/* 默认content-box的样式 */
.box-default {
width: 100px;
height: 100px;
border: 2px solid #333;
padding: 10px;
float: left;
background-color: #f0f0f0;
}
/* 设置为border-box的样式 */
.box-border {
width: 100px;
height: 100px;
border: 2px solid #333;
padding: 10px;
float: left;
background-color: #e0e0e0;
box-sizing: border-box;
}
对应的html结构如下：
<div class="container" style="width: 300px; overflow: hidden;">
<div class="box-default">默认盒模型</div>
<div class="box-default">默认盒模型</div>
<div class="box-default">默认盒模型</div>
</div>
<div class="container" style="width: 300px; overflow: hidden; margin-top: 20px;">
<div class="box-border">border-box</div>
<div class="box-border">border-box</div>
<div class="box-border">border-box</div>
</div>
运行后可以看到，第一个容器里的三个元素因为总宽度超出300px，第三个会被挤到下一行；第二个容器里的三个元素总宽度刚好300px，会排在同一行，边框没有影响到整体排版比例。
全局设置box-sizing的最佳实践
为了避免每次写样式都要单独设置box-sizing，我们可以给所有元素做全局设置，这是业内比较通用的做法：
/* 通用盒模型设置，兼容所有浏览器 */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* 保留部分元素的默认盒模型，比如部分表单元素 */
input[type="search"] {
box-sizing: content-box;
}
这样设置后，几乎所有元素的尺寸计算都会按照border-box规则进行，添加边框和内边距都不会改变元素的总宽度和高度，能大幅减少布局变形的问题。
注意事项
并不是所有场景都适合用border-box，比如部分表单元素（如<input>、<textarea>）在部分浏览器下有默认的样式，强制设置border-box可能会导致样式异常，这时候可以单独给这些元素恢复content-box规则。另外，如果项目中已经有大量基于content-box写的样式，全局切换box-sizing需要做好回归测试，避免影响原有布局。
cssbox-sizingborderlayoutwidth修改时间：2026-07-02 23:21:24