box-sizing: border-box 解决宽度计算不直观问题：width 包含 padding 和 border，避免嵌套时手动减算；需用 *{box-sizing:border-box} 全局重置，但要注意表单元素、CSS重置和第三方组件兼容性。
box-sizing: border-box 能解决什么问题
默认的 box-sizing: content-box 下，设置 width: 200px + padding: 10px + border: 2px，实际占用宽度是 224px。多层嵌套时，每层都要手动减去内边距和边框，极易算错、对不齐。
改成 box-sizing: border-box 后，width 指的是“最终渲染的总宽”，padding 和 border 都往里缩，数值即所见——嵌套再深，只要统一设了，尺寸就可直接加减。
怎么全局生效又不破坏第三方组件
直接在 :root 或 html 上设 box-sizing 不起作用，必须用通配符配合继承重置：
*,
*::before,
*::after {
box-sizing: border-box;
}
这样能覆盖所有元素，包括伪元素。但要注意：
立即学习“前端免费学习笔记（深入）”；
