box-sizing用于控制元素宽高计算方式，content-box（默认）宽高不包含padding和border，实际尺寸会更大；border-box则包含padding和border，确保设置的宽高即总占用空间。当元素宽100%加padding时，content-box会导致溢出，而border-box可避免此问题。推荐全局设置*{box-sizing:border-box}以统一模型，使布局更可控、 predictable。
在CSS中，box-sizing 属性用于控制元素的盒模型计算方式，它决定了 width 和 height 是包含内容、内边距（padding）和边框（border），还是仅指内容区域。正确使用 box-sizing 能避免布局中的尺寸计算问题。
box-sizing 的取值
box-sizing 有两个常用值：
- content-box：默认值。width 和 height 只包括内容区域，不包含 padding 和 border。实际占用空间 = width/height + padding + border
- border-box：width 和 height 包括内容、padding 和 border。设置后，元素的总宽高不会因为 padding 或 border 而变大。
使用 box-sizing 解决布局问题
常见问题：给一个宽度为100%的元素添加 padding 后，实际宽度超过父容器。
例如：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 100%;
padding: 20px;
border: 5px solid #ccc;
}
使用 content-box 时，这个元素的实际宽度是 100% + 40px (左右padding) + 10px (左右border)，会溢出父容器。
解决方法：使用 border-box
.box {
box-sizing: border-box;
width: 100%;
padding: 20px;
border: 5px solid #ccc;
}
此时 width: 100% 已包含 padding 和 border，内容区域会自动压缩，整体不会超出父容器。
推荐全局设置
为避免每个元素都要单独设置，建议在 CSS 重置或初始化样式中统一应用：
*,
*::before,
*::after {
box-sizing: border-box;
}
这样所有元素都采用 border-box 模型，布局更直观可控。
基本上就这些。合理使用 box-sizing 能让页面布局更 predictable，减少意外的溢出或错位问题。
