容器查询必须显式声明container-type（如inline-size）才能生效，否则@container规则静默失效；条件语法需用width >= 400px等函数形式，不支持min-width等声明式写法。
容器查询需要先启用 container 属性
原生 CSS 容器查询（@container）不会自动生效，必须显式给父元素标记 container 或 container-type。浏览器默认不把任何元素视为容器，这点和媒体查询完全不同。
常见错误是写了 @container (min-width: 400px) { ... } 却没生效——大概率是因为父级缺少声明。
-
container: name type：同时指定名称和类型（如container: card / inline-size） -
container-type: inline-size：最常用，按宽度响应（块级方向尺寸） -
container-type: size：需同时满足宽高约束，且元素必须有明确尺寸（如设了width和height），否则查不到 - 命名容器（
container: sidebar）可用于@container sidebar (min-width: 300px)，但仅限显式匹配，不支持通配或继承
@container 中的条件语法和媒体查询不同
@container 的条件括号内不能直接写 min-width: 400px 这类声明，必须用函数形式，比如 width >= 400px，而且只支持 width、height、inline-size、block-size 四个逻辑属性（取决于 container-type 设置）。
例如：container-type: inline-size 时，只能用 width 或 inline-size；设为 size 才能用 height。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
@container (min-width: 400px) { ... }→ 浏览器直接忽略整个规则 - 正确写法：
@container (width >= 400px) { ... } - 支持比较符：
>、>=、<、<=、==（注意是双等号），不支持and/or组合，多条件需嵌套或用container-name分离 - 单位必须带（如
400px、50%），不支持无单位数值
container-type: inline-size 是最稳妥的起步选择
多数卡片、网格项、侧边栏等场景只需响应容器宽度变化，inline-size 类型兼容性好、行为可预测，且不要求父元素有固定尺寸——它基于内容流方向的可用宽度计算，即使父元素是 flex 或 grid 子项也能工作。
相比之下，container-type: size 要求元素自身设置了 width 和 height（或由布局强制出确定尺寸），否则查询始终返回 0，导致条件永不匹配。
- Flex 项目中：直接加
container-type: inline-size即可，无需额外设置min-width等 - Grid 项目中：同上，但注意
grid-template-columns若用了auto-fit+minmax()，容器宽度会动态变化，@container能实时响应 - 绝对定位/浮动元素：不推荐设为容器，其尺寸计算逻辑不稳定，容易触发“未定义容器”警告
调试时注意 DevTools 的容器面板和报错提示
Chrome 和 Edge 的 Elements 面板右侧有「Container」标签页，能直观看到哪些元素被识别为容器、当前类型、以及实时尺寸值。如果某元素没出现在这里，说明 container-type 未生效或被覆盖。
控制台里可能输出类似 Failed to execute 'query' on 'CSSContainerRule': Container not found 的错误，通常意味着查询语句里写的容器名不存在，或该容器尚未完成布局（比如在 display: none 下）。
- 检查 computed 样式中是否存在
container-type，确认没被更早的规则重置（如container-type: normal） - 避免在
content-visibility: hidden或overflow: clip元素上设容器，部分浏览器会跳过尺寸采集 - 服务端渲染（SSR）页面中，若 JS 动态插入容器元素，需确保样式已就绪后再触发重排，否则首次查询可能取到 0
