设为 border-box 后 width/height 包含 padding 和 border，避免嵌套时尺寸累加出错；默认 content-box 下宽高仅指内容区，实际占用为宽高+2×内边距+2×边框；全局用 * { box-sizing: border-box; } 最便捷。
直接把盒子模型设为 border-box，就能让 width 和 height 包含 padding 和 border，彻底避开多层嵌套时内边距、边框反复叠加导致的尺寸偏差问题。
为什么嵌套后尺寸容易算错
默认的 content-box 模型下，设置 width: 200px 只控制内容区宽度，加上 padding: 10px 和 border: 1px 后，实际占位变成 200 + 2×10 + 2×1 = 222px。嵌套层级一多，每一层 padding/border 都要手动累加，极易出错。
用 border-box 一劳永逸
启用后，width: 200px 就是元素最终渲染的总宽度，padding 和 border 从这个宽度里“挤”出来，不再额外撑开。
- 全局设置（推荐）：
* { box-sizing: border-box; } - 局部设置：
.card { box-sizing: border-box; width: 300px; padding: 16px; border: 2px solid #ccc; }
此时该 card 总宽稳稳就是 300px
嵌套结构下的真实好处
比如一个卡片内含标题、内容、按钮三层：
- 外层卡片设
width: 400px; box-sizing: border-box; - 内部标题设
padding: 12px; border-bottom: 1px solid #eee; - 内容区再设
padding: 16px; - 所有子元素宽度仍可统一用
width: 100%，不会溢出或缩窄
无需再为每层减去 padding+border 去反推 content 宽度。
注意兼容性与例外情况
IE8+ 和所有现代浏览器都支持 box-sizing，基本无兼容顾虑。 唯一要注意的是：某些原生表单控件（如 、）在部分旧版浏览器中可能不完全遵循，若遇到异常，可单独重置：select, textarea { box-sizing: border-box; }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
