标准盒模型中width仅含content，怪异模型中width包含padding和border；box-sizing: content-box为默认值，border-box使width直接等于元素总宽（含padding与border）。
看 width 值到底包不包含 padding 和 border
标准盒模型中，width 仅指 content 区域的宽度；怪异盒模型中，width 是 content + padding + border 的总和。这是最直接、最可靠的区分方式——不用查文档、不用试渲染，只看 CSS 里写的 width 语义是否“含内边距和边框”。
box-sizing 值决定当前用的是哪种模型
浏览器默认使用 box-sizing: content-box（标准模型），而 box-sizing: border-box 就是怪异模型的行为。注意：border-box 不代表“IE专属”，现代所有主流浏览器都完整支持它。
-
content-box：加padding: 20px或border: 5px solid，元素实际占位会变宽 -
border-box：同样加padding: 20px和border: 5px solid，只要width: 200px写死，最终盒子就严格是 200px 宽 - 全局重置常用写法：
* { box-sizing: border-box; }，但要注意表单控件（如input[type="search"]）可能因此错位，需单独重置
计算总宽度时，margin 永远不参与盒模型类型判断
margin 在两种模型中地位完全一致：它始终在盒子外部，不计入 width 或 height，也不受 box-sizing 影响。常见误判就是把外边距合并（margin collapse）现象当成盒模型差异，其实那和 box-sizing 无关。
- 父子元素间
margin-top合并，发生在content-box和border-box下表现一模一样 - 相邻块级元素垂直方向的
margin折叠，也与盒模型类型无关 - 真正影响布局尺寸的，只有
width/height+padding+border这三者的归属关系
用 offsetWidth 验证实际渲染宽度最靠谱
光看 CSS 规则容易被继承或层叠干扰，直接读 DOM 属性更可靠。在控制台执行 el.offsetWidth 返回的是包含 padding 和 border 的像素值（不含 margin），再对比你写的 width 值：
立即学习“前端免费学习笔记（深入）”；
- 若
el.offsetWidth === parseInt(getComputedStyle(el).width)→ 大概率是border-box - 若
el.offsetWidth > parseInt(getComputedStyle(el).width)→ 基本确定是content-box - 注意：
getComputedStyle(el).width返回带单位的字符串，必须parseInt转数字再比
这个方法绕过了样式来源（行内、style 标签、外链）、浏览器默认行为、DOCTYPE 触发模式等干扰项，直击渲染结果本身。
