在CSS布局过程中，给元素设置边框后内容超出父容器是很多开发者都会遇到的常见问题，这通常和CSS默认的盒模型计算规则有直接关系，而box-sizing属性就是调整盒模型计算方式的核心属性，合理使用它可以有效避免这类溢出问题。
为什么边框会导致溢出父容器
CSS默认的盒模型计算方式是content-box，在这种模式下，元素的宽度和高度仅计算内容区域的大小，边框和内边距会额外加到设定的宽高之外。比如给一个子元素设置宽度为100%，同时添加1像素的边框，那么它的实际宽度就会变成100%加上2像素，自然会超出父容器的范围。
我们可以通过一个简单的示例来验证这个问题：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
width: 300px;
height: 200px;
background-color: #f0f0f0;
padding: 10px;
}
.child {
width: 100%;
height: 100px;
border: 2px solid #ff0000;
background-color: #e6f7ff;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">子元素内容</div>
</div>
</body>
</html>
运行上面的代码会发现，子元素的边框已经超出了父容器的范围，因为子元素的实际宽度是300px（父容器内容宽度）加上4px（左右边框各2px），总共304px，超过了父容器的300px内容宽度。
box-sizing属性的两个核心值
box-sizing属性用于改变元素的盒模型计算方式，最常用的两个值是content-box和border-box。
content-box（默认值）
这是CSS的标准盒模型，元素的width和height属性仅对应内容区域的宽高，边框（border）、内边距（padding）会额外添加到设定的宽高之外，也就是我们前面遇到的溢出场景对应的计算规则。
border-box
在这种模式下，元素的width和height属性会包含内容区域、内边距和边框的大小，也就是说设定的宽高已经是元素的实际最终宽高，添加边框和内边距时会自动压缩内容区域的大小，不会让元素整体超出设定的宽高。
用box-sizing解决边框溢出问题
要解决前面示例中的溢出问题，只需要给子元素设置box-sizing: border-box即可，修改后的代码如下：
.child {
width: 100%;
height: 100px;
border: 2px solid #ff0000;
background-color: #e6f7ff;
box-sizing: border-box; /* 添加这行属性 */
}
添加之后，子元素的宽度100%对应的300px已经包含了2像素的左右边框，内容区域的宽度会自动变成300px减去4px等于296px，整体宽度不会超出父容器，溢出问题就解决了。
常见的使用场景和注意事项
- 全局设置box-sizing：很多项目会在重置样式时给所有元素设置
box-sizing: border-box，避免后续布局中出现类似的溢出问题，代码示例如下：
* {
box-sizing: border-box;
}
/* 有些旧版本浏览器需要单独设置伪元素 */
*:before, *:after {
box-sizing: border-box;
}
- 注意外边距（margin）的计算：box-sizing属性只会影响内容、内边距、边框的计算，外边距依然会额外添加到元素整体之外，如果设置了margin还是可能出现溢出，需要额外调整。
- 混合使用不同盒模型：如果项目中部分元素需要保留默认的content-box计算规则，不要全局设置border-box，只给需要的元素单独设置即可。
其他可能相关的溢出场景
除了边框导致的溢出，还有可能是内边距或者元素内容本身超过设定宽高导致的溢出，这时候可以结合overflow属性来处理，比如设置overflow: hidden隐藏超出部分，或者overflow: auto添加滚动条，不过最核心的还是先通过box-sizing属性调整好盒模型的计算规则，从根源上避免不必要的溢出问题。
CSSbox-sizingborder-boxcontent-box修改时间：2026-06-25 07:57:27