标准盒模型与怪异盒模型的核心区别仅在于width和height属性的语义：标准模型中二者仅指content区域，怪异模型中则包含content+padding+border；可通过getcomputedstyle(el).boxsizing准确判断，返回content-box为标准模型，border-box为怪异模型，空字符串则按默认content-box处理。
标准盒模型和怪异盒模型的区别，只在 width 和 height 这两个 CSS 属性的语义上：前者只管 content 区域，后者管的是 content + padding + border 的总和。这不是浏览器兼容性问题，而是你写不写 box-sizing 的选择问题。
怎么判断当前元素用的是哪种盒模型
别靠猜，直接查 DOM 属性：
-
getComputedStyle(el).boxSizing返回"content-box"→ 标准模型（浏览器默认） - 返回
"border-box"→ 怪异模型行为（注意：不是 IE 专属，所有现代浏览器都支持） - 返回空字符串 → 没显式设置，按默认
content-box处理
不要只看 CSS 文件里有没有写 box-sizing —— 继承、层叠、重置样式都可能覆盖它。最稳妥的方式是在控制台里对具体元素执行上述代码。
为什么 offsetWidth 比写的 width 大
这是标准模型的典型表现。比如：
div {<br> width: 200px;<br> padding: 15px;<br> border: 3px solid #000;<br>}
此时 el.offsetWidth 返回 236（200 + 15×2 + 3×2），因为 offsetWidth 永远包含 padding 和 border，而 width 在标准模型里只算 content。
- 若你期望
offsetWidth === 200，就得加box-sizing: border-box - 若你改了
padding却发现盒子变宽了，大概率漏写了box-sizing -
margin永远不参与这个计算，它不影响offsetWidth，也不受box-sizing控制
全局设 * { box-sizing: border-box } 有什么坑
写 * { box-sizing: border-box; } 看似省心，但容易踩这些坑：
- 原生表单控件（如
input[type="search"]、textarea）在某些浏览器里会因border-box错位或高度异常 - 第三方 UI 库（比如旧版 Bootstrap）可能已内部处理过盒模型，重复重置反而破坏布局
- SVG 元素、
button等替换元素对box-sizing的响应不一致，建议单独测试
稳妥做法是：*, *::before, *::after { box-sizing: border-box; }，再针对性地给 input、select、textarea、button 单独设回 content-box。
真正容易被忽略的点是：盒模型差异从来不会导致样式“不生效”，它只会悄悄让尺寸计算偏离预期——尤其在响应式布局、栅格系统或动态插入内容时，padding 和 border 的叠加效应会被放大。验证不能只靠眼睛看，得用 offsetWidth/offsetHeight 读真实像素值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
