box-sizing属性决定元素宽高计算方式，默认content-box中宽高仅含内容，实际总宽高需加padding、border和margin；而border-box中设置的宽高包含内容、padding和border，更利于布局控制。推荐全局设置为border-box以提升尺寸可控性。
在CSS中，元素的总宽高计算方式受 box-sizing 属性影响。默认情况下，元素使用 content-box，但通过设置为 border-box 可以更直观地控制布局尺寸。下面详细解析两者的区别和计算方法。
box-sizing: content-box（默认）
这是浏览器默认的盒模型。此时，CSS中设置的 width 和 height 仅指内容区域（content）的大小，不包括内边距（padding）、边框（border）和外边距（margin）。
因此，元素实际占用的总宽度和高度为：
- 总宽度 = width + 左右 padding + 左右 border + 左右 margin
- 总高度 = height + 上下 padding + 上下 border + 上下 margin
一个 div 设置了 width: 200px; padding: 10px; border: 5px solid black;，那么它实际占据的宽度是：
200 + 10×2 + 5×2 = 230px
box-sizing: border-box
在这种模式下，CSS中设置的 width 和 height 包含了内容区域、内边距和边框，但不包含外边距（margin）。
立即学习“前端免费学习笔记（深入）”；
此时的计算方式为：
- 设置的 width = content + padding + border
- 设置的 height = content + padding + border
- 总宽度 = width + 左右 margin
- 总高度 = height + 上下 margin
同样设置 width: 200px; padding: 10px; border: 5px solid black;，但 box-sizing 为 border-box，则内容区域会被压缩为：200 - 20 - 10 = 170px 宽。
如何选择合适的 box-sizing
使用 border-box 更适合现代布局，尤其在栅格系统或需要精确控制容器尺寸时。它可以避免因添加 padding 或 border 导致元素溢出父容器的问题。
推荐全局设置：
*, *::before, *::after {
box-sizing: border-box;
}
这样所有元素都统一使用 border-box 模型，布局更 predictable（可预测）。
基本上就这些。理解 box-sizing 能帮你更准确地控制页面结构，减少意外的尺寸偏差。
