@container 规则中不能直接声明 css 变量，必须通过具体选择器（如 .card）赋值；父容器需显式设置 container-type: inline-size，否则规则静默失效；断点仅支持 px、%、vw，em/rem/calc() 等不生效；命名容器可精准匹配，匿名规则易误触发。
@container 规则里不能直接赋值 CSS 变量，必须通过选择器落地；父容器没设 container-type: inline-size，整条规则就静默失效——这不是语法错误，但样式永远不会生效。
为什么 @container 里的 --gap: 24px 不起作用
CSS 变量声明本身不被 @container 支持。浏览器会跳过 @container (min-width: 500px) { --gap: 24px; } 这类写法，变量根本不会定义。它不是作用域声明，而是条件样式块，只响应选择器匹配后的属性设置。
-
@container是条件规则，不是变量作用域，不能在其中直接声明变量 - 必须用具体选择器（如
.card、.item）包裹变量赋值，例如@container (min-width: 500px) { .card { --card-gap: 24px; } } - 变量生效还依赖目标元素是否实际用了
var(--card-gap)，且该元素必须在已启用container-type的祖先树内
父容器必须显式设 container-type: inline-size
这是整个机制的起点。没这句，@container 就是死代码——不报错、不警告、不生效。
- 别指望
div或section默认就是容器；它们只是普通块级元素 - 禁用
display: contents、position: absolute、float、display: inline的父元素，这些会让尺寸不可测 - 不能设在
body或:root上，它们多数情况下不构成格式化上下文 - 推荐用
container-type: inline-size；size需同时设container-name，兼容性和实用性都差
@container 断点单位只能用 px、%、vw
用错单位会导致断点完全不触发，尤其注意 em 和 rem 在这里毫无意义。
-
px最稳，基于内容区可用宽度（inline-size available space） -
%仅当父容器有明确宽度时有效；若父容器靠内容撑开（如width: max-content），50%可能等于0px -
vw虽被支持，但语义已偏离容器查询本意——它按视口算，不是容器自身尺寸 -
em、rem、calc()、vh全部不支持；写进去也不会报错，只是断点永不命中
嵌套容器和命名隔离的实际影响
多个可查询容器共存时，匿名 @container 规则会匹配所有合格父容器，容易误触发。
- 给父容器加
container-name: sidebar，再写@container sidebar (min-width: 320px) { ... }，就能精准控制作用范围 - 同一元素可设多个名字：
container-name: header nav，对应不同规则块 - 命名不区分大小写，但建议全小写+短横线，避免和自定义属性冲突
- 未命名容器默认属于匿名组，所有未命名
@container都会尝试匹配它
真正卡住人的从来不是语法，而是让那个父容器“可测”：flex 子项的 min-width: auto 会锁死收缩，grid 轨道没尺寸约束时容器宽度为 0，contain 层级没配对就会泄漏干扰——这些细节一错，查询就永远等不到第一次触发。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
