CSS 里的尺寸计算并不像表面看起来那么直白。给一个元素写上 width: 300px，它最终占据的水平空间可能远大于 300px，原因就在于 padding 和 border 默认不会包含在 width 里。要想真正控制元素大小，box-sizing 是绕不过去的一个属性。理解了它，后面再处理栅格布局、表单对齐、百分比宽度时，很多莫名其妙的问题都会消失。
浏览器渲染一个块级元素时，会按照内容区、内边距、边框、外边距四层结构来计算空间。width 和 height 默认只作用在内容区上，这就是标准盒模型。box-sizing 的作用，就是改变这个作用范围。
box-sizing 在盒模型中的角色
标准盒模型下，一个元素的实际占位宽度等于 width 加上左右 padding 再加上左右 border，margin 不属于元素自身尺寸，但会影响周围的排列空间。也就是说，如果你给一个<div>设置 width: 300px，同时设置 padding: 20px 和 border: 5px solid #333，那么它在页面上实际占据的宽度并不是 300px，而是 300 + 20 * 2 + 5 * 2 = 350px。
.box {
width: 300px;
padding: 20px;
border: 5px solid #333;
box-sizing: content-box;
}
上面这段代码中的 box-sizing: content-box 其实可以省略，因为它是浏览器默认值。content-box 的含义是：width 和 height 只包含内容区域，padding 和 border 会在外部继续叠加。这种模型在早期网页设计中比较常见，因为那时候布局更依赖内容自然撑开，而不是精确的像素控制。但到了今天，响应式设计和组件化开发成为主流，这种叠加计算就会带来很多不便。
需要特别注意的是，margin 在两种取值下都不会被包含进 width 或 height。即使设置 box-sizing: border-box，margin 仍然是独立的外边距，不会影响元素自身尺寸。很多开发者误以为 border-box 会把外边距也算进去，这个理解是不对的。
border-box 如何让尺寸更可控
box-sizing 的另一个取值是 border-box。它把 width 和 height 的计算范围扩展到内容区、内边距和边框，但不包括外边距。也就是说，当你给一个元素设置 width: 300px，并同时设置 padding: 20px 和 border: 5px solid #333 时，元素整体占位宽度就是 300px。浏览器会先确定总宽度，再反推出内容区的宽度，也就是 300 - 20 * 2 - 5 * 2 = 250px。
.box-border {
box-sizing: border-box;
width: 300px;
padding: 20px;
border: 5px solid #333;
background: #f5f5f5;
}
这种计算方式更符合大多数人的直觉。你看到 width 是多少，元素实际占用的水平空间就是多少，不会因为添加了内边距或边框导致尺寸超出预期。在制作卡片、按钮、输入框、导航项等组件时，border-box 可以极大减少调试时间。比如一个按钮需要固定宽度，同时内部文字和边框都要留出空间，border-box 会让这些约束直接生效。
border-box 并不是银弹，它也有需要注意的地方。如果 padding 和 border 的数值加起来超过了 width，内容区就会被压缩为 0，甚至可能出现负值。浏览器通常会按 0 处理内容区，但元素总体宽度仍然保持 width 设定的值。所以在极端数值下，要检查内容是否还有空间显示。
全局设置与局部覆盖的工程实践
在现代 CSS 工程中，很多项目会在样式文件开头统一设置所有元素使用 border-box。这样做的好处是，从根上消除不同元素之间盒模型计算差异。常见写法如下：
*,
*::before,
*::after {
box-sizing: border-box;
}
这里使用通配选择器把 box-sizing 应用到所有元素以及它们的伪元素上。虽然 box-sizing 本身不是继承属性，但通过通配选择器可以直接覆盖浏览器默认样式。伪元素通常也会参与布局，比如使用 ::before 添加装饰线或图标时，如果仍然使用 content-box，伪元素的实际尺寸可能和预期不一致，所以统一设置是必要的。
不过，全局设置 border-box 也可能影响到第三方组件或旧版 UI 库。有些插件内部样式基于 content-box 编写，切换后可能出现宽度偏移。这时候可以对特定容器做局部覆盖：
*,
*::before,
*::after {
box-sizing: border-box;
}
.third-party .legacy-control {
box-sizing: content-box;
}
这种先全局设置、再局部修正的方式，既保证了项目整体布局的可控性，又避免了对第三方组件的破坏。在引入新的 UI 库时，如果发现组件内部出现尺寸异常，可以先检查是否因为盒模型规则冲突导致。
典型布局问题与排查思路
使用 content-box 时最容易遇到的一个问题是：子元素设置 width: 100%，同时加上 padding 后，会撑破父容器。比如父容器宽度是 400px，子元素 width: 100% 代表 400px，如果再加上左右各 20px 的 padding，子元素实际占位宽度就变成了 440px，超出父容器 40px，导致横向溢出。
.parent {
width: 400px;
border: 1px solid #ddd;
}
.child-overflow {
box-sizing: content-box;
width: 100%;
padding: 0 20px;
}
.child-fix {
box-sizing: border-box;
width: 100%;
padding: 0 20px;
}
上面两个子元素都写了 width: 100%，但 child-overflow 会因为 padding 导致溢出，而 child-fix 由于使用 border-box，padding 会被包含在 100% 宽度内，正好填满父容器。这个问题在移动端页面中尤其常见，因为很多容器宽度使用百分比，padding 的叠加往往就是横向滚动条的来源。
表单控件也是 box-sizing 的重灾区。input、textarea、select 在不同浏览器中的默认盒模型可能存在差异，同样设置 width: 100% 后，有的控件刚好贴合容器，有的却会超出。统一使用 border-box 后，这些控件的宽度行为会保持一致。例如：
input[type="text"],
input[type="email"],
textarea,
select {
box-sizing: border-box;
width: 100%;
}
在 Flexbox 和 Grid 布局中，box-sizing 同样会影响项目尺寸的计算。比如 flex-basis: 300px 在 content-box 下表示内容区基准为 300px，最终占位还要加上 padding 和 border；而在 border-box 下，300px 就是项目整体基准宽度。所以如果发现弹性项目实际宽度与设计稿不符，除了检查 flex 属性，也要确认 box-sizing 是否一致。
排查这类问题时，可以打开浏览器开发者工具，选中目标元素查看盒模型高亮图。高亮图会分别标出 content、padding、border、margin 的具体数值。先确认 width 作用在了哪一层，再决定是否修改 box-sizing。大多数情况下，把 box-sizing 调整为 border-box 就能解决由尺寸叠加引起的布局错误。
css box-sizing元素大小盒模型修改时间：2026-09-27 00:30:02