使用 box-sizing: border-box 可解决css元素尺寸计算问题，使 width 和 height 包含 padding 和 border，实现所设即所得；默认的 content-box 模型则仅将宽高应用于内容区域，导致总尺寸超出预期；通过全局设置 ,::before,*::after { box-sizing: border-box; } 可统一所有元素的盒模型，提升布局可控性、简化响应式设计，适配 flexbox 与 grid 更顺畅，是现代 css 布局的最佳实践之一。
处理CSS元素宽高时，很多人会遇到实际尺寸与预期不符的问题。比如给一个元素设置 width: 200px; padding: 10px; border: 5px solid，最终占据的宽度却是 230px（200 + 左右内边距20 + 左右边框10），这正是默认盒模型带来的困扰。解决这一问题的关键是使用 box-sizing: border-box 来提升布局的可控性。
理解默认的 content-box 模型
默认情况下，CSS 使用的是 content-box 盒模型：
- 设定的 width 和 height 只作用于内容区域
- padding、border、margin 都会额外增加元素总尺寸
- 导致布局计算复杂，尤其在响应式设计中容易错位
div {
width: 200px;
padding: 20px;
border: 5px solid #000;
}
// 实际宽度 = 200 + 40 + 10 = 250px
用 border-box 统一尺寸逻辑
将 box-sizing: border-box 应用于元素后，width 和 height 包含了内容、内边距和边框：
- 设定 width: 200px 后，无论 padding 或 border 多大，总宽度保持 200px
- 内容区域自动压缩以腾出空间给 padding 和 border
- 尺寸更直观，便于栅格布局和组件封装
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid #000;
}
// 总宽度严格等于 200px，内容区变为 150px
全局设置提升开发效率
为避免每个元素手动设置，推荐在项目初始化时统一应用：
*,
*::before,
*::after {
box-sizing: border-box;
}
- 所有元素默认采用 border-box，减少意外溢出
- 团队协作更一致，降低理解成本
- 适配现代布局方案如 Flexbox、Grid 更顺畅
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
