不能直接用 { box-sizing: border-box } 全局重置，因其会强制 svg、input[type="search"]等依赖 content-box 渲染的元素异常；必须显式排除不兼容元素，并包含 ::before, *::after 以确保伪元素统一。
为什么不能直接用 * { box-sizing: border-box } 做全局重置
很多初学者以为加一行通配符就够了，但实际项目中会出问题：* { box-sizing: border-box } 会强制所有元素（包括 svg、input[type="search"]、某些 Webkit 表单控件）也走 border-box，而它们在部分浏览器里原本依赖 content-box 的渲染逻辑，强行覆盖后可能导致尺寸错乱或样式异常。Sass mixin 的价值在于可控、可选、可嵌套——只作用于你明确需要的上下文。
box-sizing-reset mixin 的标准写法与参数设计
真正健壮的全局重置 mixin 应该：支持选择性应用、兼容旧版浏览器（加 -webkit-box-sizing）、排除已知不兼容元素。推荐这样写：
@mixin box-sizing-reset($exclude: null) {
&, & *,
& *::before,
& *::after {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
<p>@if $exclude != null {</p><h1>{$exclude} {</h1><pre class="brush:php;toolbar:false;"> box-sizing: content-box;
-webkit-box-sizing: content-box;
}} }
关键点：
立即学习“前端免费学习笔记（深入）”；
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
-
$exclude参数接受选择器字符串（如"svg, input[type='search']"），用#{$exclude}插值实现动态排除 - 必须包含
& *::before和& *::after，否则伪元素会继承父级box-sizing，但实际未被重置 - 不要省略
-webkit-box-sizing—— Safari 5.1 和 iOS 5–6 仍需它
如何在不同场景下安全调用这个 mixin
直接在 :root 或 html 上用？不行。这会让整个文档树无差别生效。正确做法是按容器粒度控制：
- 全局基础层（推荐）：
@include box-sizing-reset("svg, [type='search'], .legacy-input")放在_base.scss中，作用域为html - 组件隔离层：在 BEM 块级选择器内调用，比如
.card { @include box-sizing-reset(); }，确保仅影响该组件内部 - 第三方库兼容：若集成某个 UI 库（如 Bootstrap），可在其 wrapper 容器上用
@include box-sizing-reset(".bootstrap-input, .btn")主动豁免
注意：@include box-sizing-reset 必须写在所有子元素样式之前，否则后续显式设置的 box-sizing 可能被层叠覆盖。
常见错误：重置后 padding/border 仍“撑大”容器
这不是 mixin 问题，而是开发者忽略了父容器是否设置了 width: 100% 或 flex-basis。当子元素用了 border-box，但父容器本身没限制 max-width 或未清除 margin，视觉上就会“溢出”。排查顺序：
- 检查父级是否有
box-sizing: content-box（比如某些 reset.css 里漏写了html） - 确认是否在
rem/em单位下误算了padding值（border-box不改变计算方式，只改变尺寸归属） - 用 DevTools 的 Layout 面板看 computed
box-sizing是否真生效——有时被更具体的 CSS 规则覆盖了
最隐蔽的坑是：Sass 编译后生成的 CSS 选择器权重可能低于第三方样式，这时候得加 !important（不推荐），或改用更高优先级的选择器，比如 html &。
