直接用 box-sizing: border-box 不够，因需重复书写、兼容旧浏览器要加前缀、全局切换难；Less 中应定义带开关的 .border-box() 混合宏统一管理。
为什么直接用 box-sizing: border-box 不够？
Less 里写 box-sizing: border-box 本身没问题，但每次都要重复写、容易漏、维护成本高。尤其当项目要兼容老浏览器（比如 IE8）时，你还得加 -webkit-box-sizing 和 -moz-box-sizing 前缀——手动补太累，也容易不一致。
更关键的是：全局切换需求常出现在重构阶段，比如从 content-box 迁移到 border-box，你不可能逐个文件改，必须靠可复用、可开关的机制。
定义一个带开关的 .border-box() 混合宏
核心思路是用 Less 变量控制是否启用，再用混合宏封装所有前缀和声明。这样既能全局生效，也能按需局部覆盖。
@use-border-box: true;
<p>.border-box() when (@use-border-box = true) {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}</p><p>// 使用示例
.container {
.border-box();
padding: 16px;
width: 300px; // 此时 width 包含 padding
}
-
@use-border-box设为false就能一键关闭全部box-sizing声明，适合临时回退验证 - 混合宏名用
.border-box()而不是.box-sizing()，避免和 CSS 属性名混淆，语义更清晰 - 不要在
:global或html上直接调用——那样会污染所有元素；应显式应用到需要的类或选择器上
如何让所有元素默认用 border-box？
全局重置最常用方式是给 * 或 html 加混合宏，但要注意优先级和继承限制：
立即学习“前端免费学习笔记（深入）”；
html {
.border-box();
}
<p><em>, </em>::before, *::after {
.border-box();
}
- 必须把
*::before和*::after显式包含进来，否则伪元素仍走默认content-box - 如果用了 CSS-in-JS 或 Shadow DOM，这种全局重置可能不生效，得在组件内单独调用
.border-box() - 某些第三方 UI 库（如 Ant Design）内部已设
box-sizing，叠加后可能触发冗余声明，建议在它们的样式加载后覆盖
和 autoprefixer 配合时要注意什么？
如果你同时用 Less 和 autoprefixer（比如在 Webpack 或 Vite 中），Less 里的前缀其实是多余的——autoprefixer 会自动补全，而且更精准。
这时推荐精简混合宏：
.border-box() {
box-sizing: border-box;
}
- 删掉所有厂商前缀，交给 autoprefixer 处理；否则可能产生重复或冲突声明
- 确认构建工具中 autoprefixer 的
browsers配置包含目标环境（例如"IE >= 10"），否则它不会输出-ms-前缀 - Less 编译后的 CSS 文件体积会变小，且 autoprefixer 的前缀逻辑比手写更可靠
真正麻烦的不是写法，而是混合宏的「作用域穿透」：Less 中嵌套规则里调用 .border-box() 没问题，但如果混用 CSS Modules 或 scoped style，就得确保宏定义在可用作用域内——这点很容易被忽略。
