@layer 不处理盒模型，仅控制规则参与层叠的层级；要安全覆盖第三方盒模型样式，须同时满足：层声明正确、第三方样式显式收编进某层、覆盖规则选择器特异性足够或位于更高层且写法合规。
直接说结论：@layer 本身不处理盒模型（box-sizing、margin、padding 等），它只控制「哪一层的规则能参与计算」；要安全覆盖第三方盒模型样式，必须同时满足三层条件：层声明正确、第三方样式被显式收编进某层、你的覆盖规则选择器特异性足够或位于更高层且写法合规。
为什么 @layer 单独写个 box-sizing: border-box 常常无效
因为绝大多数第三方库（如 Bootstrap、Ant Design、Element Plus）的重置或基础样式是裸规则，比如：
*, ::before, ::after { box-sizing: border-box; }这类规则默认落在「未命名顶层」，浏览器规范规定：未命名顶层优先级高于所有命名层（@layer base、@layer overrides 等）。所以哪怕你写了：
@layer overrides { *, ::before, ::after { box-sizing: border-box; } }——它也压不住第三方那条裸规则。这不是 bug，是层叠规则设计使然。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
- DevTools 的 Styles 面板里看不到被划掉规则旁有
layer(overrides)标识 -
Computed面板中box-sizing显示来源是antd.css:123，而非你写的main.css - 手动加
!important才生效 → 说明层机制根本没启动
必须把第三方重置 CSS “塞进”指定层，不能靠 @import 嵌套
错误写法（完全无效）：
@layer framework {
@import "bootstrap/dist/css/bootstrap.min.css"; /* 浏览器直接忽略整行 */
}正确做法只有两种，且都要求 @import 语句出现在整个 CSS 文件最顶部（前面不能有任何空行、注释、@charset 除外）：
-
推荐（静态构建项目）：用顶层
@import url(...)+layer()参数@import url("bootstrap/dist/css/bootstrap-reboot.css") layer(framework); -
兼容性兜底（尤其动态加载插件）：JS 动态包裹
监听link[rel="stylesheet"][href*="bootstrap"]加载完成 → 取其sheet.cssRules或 fetch 原始内容 → 提取所有顶层规则（跳过@media、@supports）→ 用@layer framework { ... }包裹 → 插入新<style></style>
注意：layer() 括号内只能填已声明的层名，且必须带引号，例如 layer("framework") 是错的，必须是 layer(framework)。
覆盖 box-sizing 等基础属性时，选择器必须匹配或更高特异性
@layer 不豁免选择器特异性。即使你把 Bootstrap 的重置塞进了 @layer framework，而你的修复写在 @layer overrides，以下写法依然无效：
@layer overrides {
* { box-sizing: border-box; } /* 特异性 0,0,0,0 —— 和 framework 层里同级规则打平，按规则顺序决胜负 */
}更稳妥的写法是：
- 复刻第三方选择器结构，确保层级内胜出：
@layer overrides { *, ::before, ::after { box-sizing: border-box !important; } }→ 虽然用了!important，但仅限层内兜底，且只用于基础重置 - 或改用更高特异性目标（适合局部覆盖）：
@layer overrides { .my-app *, .my-app::before, .my-app::after { box-sizing: border-box; } } - 避免通配符冲突：若第三方用
html *，你就得写html .my-app *才能赢
验证方式：打开 DevTools → Computed → 看 box-sizing 右侧的 Specificity 值（如 0,0,0,0）和来源文件行号。
构建工具不支持会导致 @layer 被静默删除
Vite / Webpack 项目中，若未启用 postcss-cascade-layers 插件，旧版 PostCSS 会直接删掉所有 @layer 语句，不报错也不警告。结果就是你写的层全消失，回归传统层叠。
检查方法：
- 构建后打开生成的 CSS 文件，搜索
@layer—— 如果没了，就是插件没启 - Vite 用户：确认
vite.config.ts中css.postcss.plugins包含require('postcss-cascade-layers')() - Webpack 用户：检查
postcss-loader配置里的 plugins 数组
另一个隐形陷阱：@layer 声明必须是 CSS 文件第一行（@charset 可在它前面），中间夹一个空行、一行注释、甚至一个 @import，后续所有层声明都会被浏览器忽略 —— DevTools 里根本不会显示层标识，你却还傻等它生效。
