content-box下width仅指内容宽高，border-box下width包含内容、padding和border；前者总宽=width+2×padding+2×border，后者width即总宽，且伪元素和IE11 flex子项需额外处理。
box-sizing: content-box 和 border-box 的 width 含义完全不同
标准盒模型（box-sizing: content-box）下，width 和 height 只控制内容区尺寸；怪异盒模型（box-sizing: border-box）下，width 和 height 控制的是“内容 + padding + border”的总尺寸。这是最根本的差异，不是渲染 bug，而是 CSS 规范对同一属性的不同语义定义。
IE6–8 怪异模式会自动启用 border-box，但不依赖 box-sizing 属性
没有 <!DOCTYPE html> 时，IE6–8 进入怪异模式（Quirks Mode），此时即使没写 box-sizing: border-box，width 也默认包含 padding 和 border。而现代浏览器在标准模式下，无论 IE9+ 还是 Chrome/Firefox，都默认 content-box，必须显式设置 box-sizing: border-box 才能模拟 IE 旧行为。
全局重置必须覆盖伪元素，否则布局仍会偏移
只写 * { box-sizing: border-box; } 是不够的。CSS 伪元素（如 ::before、::after）默认仍按 content-box 计算，尤其当它们被用来绘制装饰边框或三角箭头时，会导致视觉错位。正确写法是：
*, *::before, *::after {
box-sizing: border-box;
}这个规则在 IE8+、Firefox、Chrome 中均生效，且 IE8 不支持 inherit，所以不能靠继承，必须通配。
立即学习“前端免费学习笔记（深入）”；
flex 子项在 IE11 中可能忽略 border-box 设置
IE11 对 display: flex 的实现有遗留缺陷：如果子元素未显式声明 display: block（比如是原生 inline 元素如 span 或未设 display 的 div），即使父容器是 flex，子元素也会回退到 content-box 行为——哪怕全局已重置。常见于标签页、按钮组等场景。
- 解决办法：给 flex 子项统一加
display: block或display: flex - 验证方式：用开发者工具检查子元素 computed 样式中
box-sizing是否真为border-box
实际开发中最容易被忽略的，是伪元素和 IE11 flex 子项这两处隐性失效点。它们不会报错，但会让 margin/padding 表现不一致，排查时往往绕远路。
