标准盒模型中width/height仅指content区域，怪异盒模型中则包含content+padding+border；可通过box-sizing属性切换，document.compatmode可判断模式。
标准盒模型和IE怪异盒模型的计算差异，不是浏览器“算得不准”，而是对 width 和 height 这两个属性的语义定义根本不同。
box-sizing: content-box 与 border-box 的语义冲突
现代浏览器默认用 box-sizing: content-box，即 width: 200px 明确只管内容区；而旧版 IE（怪异模式）把 width: 200px 解释为“整个盒子从左 border 到右 border 的总宽”。这不是 bug，是两套规则体系。
关键验证方式是看 document.compatMode：返回 "CSS1Compat" 是标准模式，"BackCompat" 才是怪异模式——后者几乎只在缺失 或使用过时 DTD 时触发。
offsetWidth 始终反映真实像素，但含义被误解
offsetWidth 永远等于 content + padding + border（不含 margin），它不“选择”盒模型，只是忠实地读取渲染后尺寸。所以：
- 当元素是
content-box且width: 200px; padding: 10px; border: 1px→offsetWidth === 222 - 当元素是
border-box同样写width: 200px; padding: 10px; border: 1px→offsetWidth === 200，此时内容区自动压缩为178px
很多人以为 offsetWidth “变小了”，其实是 width 的语义变了，内容区被挤占了。
全局设 * { box-sizing: border-box } 的三个实际坑
看似一劳永逸，但这些地方会悄悄出问题：
-
button、input[type="search"]、textarea在 Safari/iOS WebView 中常因border-box导致高度塌陷或文字截断，必须单独重置为content-box - 第三方 UI 库（如旧版 Bootstrap、Ant Design v3）内部已按
content-box做了尺寸微调，叠加border-box会让栅格错位 - 动态插入的节点（比如通过
innerHTML或框架v-html注入）不受全局样式影响，需确保其父容器或内联 style 显式声明box-sizing
真正容易被忽略的，是 box-sizing 不会报错、不会失效，它只是静默地改变尺寸推导逻辑——尤其在 flex/grid 容器里，一个子项漏掉 box-sizing: border-box，就可能让 flex-basis 计算失准，导致布局溢出或收缩异常。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
