box-sizing: border-box 是切换到 ie 盒模型的唯一可靠方式，它使 width/height 包含 padding 和 border，行为等同于旧版 ie 怪异盒模型，且不受文档模式影响；全局重置需排除表单控件以避免渲染异常。
box-sizing: border-box 是切换到 IE 盒模型的唯一可靠方式
直接写 box-sizing: border-box 就行，它让元素的 width 和 height 包含 padding 与 border，行为完全等同于旧版 IE 的“怪异盒模型”。这不是模拟，而是标准 CSS3 正式采纳的等效实现。
注意：box-sizing 不受文档模式（如 DOCTYPE）影响，也不依赖浏览器是否处于“怪异模式”——它在任何现代浏览器中都按规范生效。你不需要改 HTML 声明，也不用切 IE 兼容模式。
-
box-sizing: content-box是默认值，对应标准模型；显式写出它通常只用于覆盖父级继承或重置第三方样式 - 该属性可取值还有
inherit和unset，但生产环境基本只用前两个 - 设置后，
offsetWidth会等于你写的width值（前提是没 margin）
全局重置时 * { box-sizing: border-box } 会出什么问题
看似省事，但会干扰原生表单控件和部分替换元素的真实渲染尺寸。
-
<input type="search">、<textarea></textarea>在 Safari 和旧版 Chrome 中可能高度塌陷或内边距错位 - 某些 UI 库（如 Bootstrap 3）已内部用
box-sizing: border-box调整过组件，重复应用会导致 padding 计算叠加 -
<button></button>、<select></select>、SVG<rect></rect>等替换元素对box-sizing的支持不一致，有些根本忽略该声明
稳妥写法是：* { box-sizing: border-box; } 配合 input, select, textarea, button, [type="button"], [type="submit"] { box-sizing: content-box; } 单独拉回。
怎么验证当前元素用的是哪种盒模型
别靠眼睛猜，也别只看 CSS 文件里有没有写 box-sizing —— 层叠、继承、框架 reset 都可能覆盖它。
- 在控制台执行
getComputedStyle(el).boxSizing，返回"border-box"或"content-box"才是真实生效值 - 如果返回空字符串，说明没显式设置，按默认
content-box处理 - 对比
el.offsetWidth和parseFloat(getComputedStyle(el).width)：若前者明显更大，大概率是标准模型（因为加了 padding + border）
响应式布局中为什么更倾向 border-box
当你要用百分比宽度 + 固定 padding 做栅格时，border-box 能保证尺寸预期不漂移。
- 比如两个
width: 50%的子项，并排放在width: 100%容器里：加padding: 1rem后，border-box下它们仍刚好占满，content-box下则必然溢出 - 媒体查询中修改
padding时，无需同步调整width百分比，维护成本更低 - 但要注意：如果你依赖 JS 动态读取
clientWidth并做内容流式计算（比如虚拟滚动），border-box下的clientWidth已含 padding，需确认逻辑是否适配
真正容易被忽略的点是：盒模型差异从不报错，它只悄悄让 offsetWidth、getBoundingClientRect()、甚至 Flex/Grid 的剩余空间分配偏离你的直觉——尤其在嵌套多层、混合使用 rem/em/% 单位时，误差会逐层放大。验证必须落到像素值上，不能只靠视觉对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
