@layer 不创建层叠上下文或规范盒模型，仅控制样式“入场顺序”；box-sizing: border-box 必须稳居 @layer reset 最底层且不被截断、覆盖或绕过，否则盒模型计算失准。
@layer 本身不创建层叠上下文，也不直接规范盒模型；它只控制样式规则的“入场顺序”。想用它管理盒模型基础样式（比如 box-sizing），关键不是套个层就完事，而是让这条规则**稳稳落在最底层、且不被绕过**。
为什么box-sizing: border-box必须放在@layer reset里
全局重置类规则（如 * { box-sizing: border-box; }）一旦被更高层覆盖或加载错位，后续所有 padding/border 计算都会失准——这不是样式“没生效”，而是它压根没参与级联。
- 必须声明在 CSS 文件最顶部：
@layer reset, base, components;，且前面不能有任何@import、:root或空行外的注释 - 规则必须写进
@layer reset { }块内，不能只靠声明层名却不注入内容 - 如果用了构建工具（如 Vite、PostCSS），确认启用了
postcss-cascade-layers插件，否则旧环境会直接丢弃整条@layer语句
@layer reset里的box-sizing被第三方样式覆盖了怎么办
常见现象：你写了 @layer reset { * { box-sizing: border-box; } }，但 Ant Design 或 Bootstrap 的按钮依然按 content-box 渲染。这不是 @layer 失效，而是第三方 CSS 默认落在「未命名顶层」，天然高于你所有显式层。
- 别用
@layer framework { @import "antd.css"; }—— 语法非法，整个块会被忽略 - 正确做法：在主 CSS 顶部用
@import "antd.css" layer(framework);（注意是顶层语句，和@layer reset;并列） - 更稳妥方案：把第三方 CSS 内容复制进
@layer framework { /* paste here */ }，彻底收编
同一层里box-sizing规则被局部样式覆盖的典型场景
@layer 只管层间顺序，不管层内胜负。哪怕你把 box-sizing 放在 reset 层，只要某组件写了 .card > * { box-sizing: content-box !important; }，它照样赢——因为 !important 会绕过层机制。
- 禁用
!important在 reset 层内出现，它会让整套分层逻辑失效 - 检查 DevTools → Computed 面板，看目标元素的
box-sizing值右侧是否有layer标识；没有标识说明该规则根本没进层 - 若需局部覆盖，应在同层内提升选择器权重，例如
*:not(.legacy) { box-sizing: border-box; }，而不是依赖层序跳过特异性计算
真正难的不是写出 @layer reset { * { box-sizing: border-box; } } 这一行，而是确保它从构建到加载全程不被截断、不被绕过、不被 !important 穿透——任何一环松动，盒模型就回到不可控状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
