标准盒模型默认为box-sizing: content-box，width/height仅含content；怪异盒模型由box-sizing: border-box启用，width/height包含content+padding+border；margin在两者中均不参与尺寸计算。
标准盒模型是浏览器默认行为，box-sizing: content-box；怪异盒模型不是 bug，而是由 box-sizing: border-box 显式启用的、更符合布局直觉的计算方式。二者核心区别只在 width 和 height 是否包含 padding 与 border —— 其他所有属性（包括 margin）的含义和作用完全一致。
怎么一眼看出当前用的是哪种盒模型？
别猜，直接查 DOM 属性：
- 在控制台执行
getComputedStyle(el).boxSizing，返回"content-box"或"border-box"就是真实生效值 -
el.style.boxSizing只反映内联样式，容易漏掉 CSS 文件或继承值，不可靠 - 如果返回空字符串，说明没显式设置，按默认值
content-box处理 - 注意：某些 UI 库（如旧版 Bootstrap）或 reset.css 会全局设
border-box，但可能被后续规则覆盖，务必以getComputedStyle为准
为什么 offsetWidth 总比写的 width 大？
这是标准盒模型的必然表现，不是 bug。只要 box-sizing 是 content-box（默认），offsetWidth 就永远等于 width + padding-left + padding-right + border-left-width + border-right-width。
- 例如：
width: 200px; padding: 15px; border: 3px solid #000;→offsetWidth === 236 - 若你希望
offsetWidth === 200，必须加box-sizing: border-box -
margin不参与offsetWidth/offsetHeight计算，它只影响布局位置，不影响元素自身尺寸读取 - 验证时别只靠肉眼量，用
console.log(el.offsetWidth)才能确认真实像素值
全局设 * { box-sizing: border-box; } 有什么实际风险？
虽省心，但会破坏部分原生控件和第三方组件的默认尺寸逻辑：
-
input[type="search"]、textarea、select在 Safari / Firefox 中可能出现高度塌陷或文字截断 - 旧版 Bootstrap（v3 及之前）已基于
border-box设计，重复设置可能导致 padding 被双重压缩 -
button和 SVG 元素对box-sizing的响应不统一，有些浏览器下完全忽略 - 稳妥写法是：
* , *::before , *::after { box-sizing: border-box; }，再单独重置：input, select, textarea, button, [type="button"], [type="reset"], [type="submit"] { box-sizing: content-box; }
真正容易被忽略的点是：盒模型差异从不报错，也不让样式“消失”，它只是悄悄让尺寸偏离预期——尤其在动态插入内容、响应式栅格缩放、或 JS 依赖 offsetWidth 做计算时，padding 和 border 的叠加效应会被放大数倍。验证必须落到像素值上，不能只看视觉对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
