box-sizing决定width/height是否包含padding和border：content-box（默认）使尺寸易失控，border-box让宽高代表总占位宽度；需全局设置、::before、*::after并兼容旧ie。
box-sizing 直接决定你写的 width 和 height 到底“管不管” padding 和 border —— 不设它，尺寸就容易算错；设错了，布局就容易溢出或错位。
content-box 是默认行为，但常导致尺寸失控
浏览器默认所有元素都用 content-box，这意味着：width: 200px 只管内容区域，padding: 10px 和 border: 2px 会额外加在两边，实际宽度变成 200 + 20 + 4 = 224px。
- 表单控件（如
input、textarea）自带默认padding和border，和div一起设width: 100%时，它们会比预期更宽 - 栅格系统中，多个
width: 33.33%的列加起来可能超过 100%，只因每个都悄悄多占了几像素 - 用
calc()手动减去padding和border虽然可行，但维护成本高，且易漏算
border-box 让 width/height 真正代表“占位宽度”
设 box-sizing: border-box 后，width 就是元素最终在页面上占据的总宽度（含 padding 和 border），内容区域自动收缩。
- 同样
width: 200px; padding: 10px; border: 2px，实际宽度就是200px，内容区只剩176px - 外边距（
margin）不受影响，仍按标准方式向外撑开 - 对响应式布局特别友好：百分比宽度 + 固定
padding/border不再需要反复调calc()
全局设置 *::before, *::after 必须包含
只写 * { box-sizing: border-box } 是不够的——伪元素（如 ::before、::after）不继承该属性，而它们常被用于清除浮动、装饰或辅助布局，一旦漏掉，就可能突然多出几像素偏差。
- 正确写法必须是：
*, *::before, *::after { box-sizing: border-box; } - 不能省略
*前的逗号，否则选择器失效 - 现代项目基本都把它放在 CSS 最顶部，作为重置的一部分；老项目补上后，需检查是否有依赖
content-box行为的特殊样式（极少见）
兼容性不是问题，但旧版 IE 需前缀
box-sizing 在 IE8+、Chrome 1+、Firefox 2+、Safari 3.1+ 均原生支持，但 IE8 只认 -ms-box-sizing，其他旧内核也需对应前缀。
- 若仍需支持 IE8，建议这样写：
box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; - 当前（2026年）绝大多数生产环境已可安全省略前缀；但若项目仍在维护 IE11 或更早版本，保留
-ms-更稳妥 -
padding-box已被废弃，不要用；只有content-box和border-box是可靠取值
真正麻烦的不是理解 box-sizing，而是忘记它——尤其当接手别人代码时，看到 width 就以为是“总宽”，结果调试半天才发现是 content-box 在偷偷加量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
