box-sizing属性可改变CSS盒模型计算方式，默认content-box下宽高仅含内容，padding和border额外增加总尺寸；使用border-box后，宽高包含内容、内边距和边框，使布局更直观可控。通过全局设置, ::before, *::after { box-sizing: border-box; }可统一所有元素的盒模型，避免布局错位，提升开发效率。
默认情况下，CSS 的盒模型将元素的宽度（width）和高度（height）仅应用于内容区域，而内边距（padding）、边框（border）和外边距（margin）会额外增加总尺寸。这在布局时容易导致计算复杂。box-sizing 属性可以改变这种计算方式，让开发者更直观地控制元素的实际大小。
box-sizing: content-box（默认值）
这是浏览器默认的盒模型：
- 设置的 width 和 height 只包括内容区域
- padding 和 border 会增加在 width/height 之外
- 总宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
box-sizing: border-box
使用 border-box 后，元素的 width 和 height 包含了内容、内边距和边框：
- 设置的 width 和 height 是元素最终占据的总宽高
- padding 和 border 将在 width/height 内部“压缩”内容区域
- 总宽度 = 设置的 width（已包含 padding 和 border）+ 左右 margin
如何使用 box-sizing 统一布局
为了简化页面布局，很多开发者会在全局重置 box-sizing：
立即学习“前端免费学习笔记（深入）”；
*, *::before, *::after {
box-sizing: border-box;
}
这样所有元素都采用 border-box 模型，避免意外溢出或错位，尤其在栅格布局、弹性盒子中更加可控。
基本上就这些，合理使用 box-sizing 能大幅减少尺寸计算的困扰。
