容器查询生效需父元素显式声明 container-type: inline-size；若未设置、设错元素、被 display: contents/visibility: hidden 破坏盒模型，或尺寸不稳定（如 flex 压缩），@container 规则将静默失效。
父容器没设 container-type，@container 规则直接被忽略
写了 @container (min-width: 400px) 却毫无反应？不是语法错，也不是浏览器不支持——而是父元素根本没被识别为容器。浏览器不会报错，也不会警告，规则静默失效。
-
container-type必须显式声明，不能继承，也不能靠 body 或 :root 自动“升级” - 唯一广泛可用的取值是
inline-size（Chrome 105+、Safari 16.4+、Firefox 110+），监听内容区宽度 - 别写成
container-type: size——它要求宽高都稳定，目前仅 Chromium 117+ 稳定支持，且开销大 - 错误写法：
<div container-type="inline-size">—— 这是 HTML 属性，浏览器完全无视；正确写法是 CSS 规则：.card { container-type: inline-size; }
container-type 被加在了错误的元素上
容器查询只认「最近的、带 container-type 的祖先」，中间断一层就失效。常见踩坑点：
- Flex/Grid 直接子项设了
container-type: inline-size，但父容器用flex: 1或min-width: 0把它压扁到 0 宽，查出来永远是0px - 父元素用了
display: contents或visibility: hidden—— 它没有渲染盒，container-type彻底失效 - 把
container-type加在body上：它通常不构成独立格式化上下文，声明无效 - 中间某层组件（比如 React 的
<Card>）没透传container-type所需的 class，子组件的@container就找不到宿主
尺寸判断和单位用错了
@container 查的是 content box 的行内尺寸，不是你写的 width 值，也不认某些单位。
- 如果容器样式是
width: 352px; padding: 16px; box-sizing: border-box，content box 宽度 =352px − 32px = 320px，此时才匹配min-width: 320px - 慎用
%：它表示“自身宽度的百分比”，50%恒为真，几乎无响应意义 - 避免用
vw、calc()、未继承的em—— 行为未定义或不兼容 -
width: 320px是精确匹配，实际响应式逻辑依赖区间判断，始终用min-width或max-width
container-property 和 style() 配合出错
想用 container-property 传参，却读不到？关键限制很硬：
立即学习“前端免费学习笔记（深入）”；
-
container-property只能在已声明container-type的容器上设置，且必须写在同一条规则里（例如.card { container-type: inline-size; container-property: --gap: 12px; }） - 声明的属性只能在
@container规则中通过style(--gap)读取，不能在普通 CSS 里用var(--gap) - 取值必须带单位：
--gap: 12px✅，--gap: 12❌（无单位数值部分浏览器会忽略） - 不支持
calc()、函数、复合值（如1px solid red）
最常被忽略的一点：容器查询生效的前提，是容器本身有稳定尺寸且参与布局——它不是魔法开关，而是一套依赖渲染盒真实尺寸的机制。哪怕所有代码都写对了，只要父容器被 flex 压缩、被 transform 隔离、或被 display: contents 抹掉盒模型，查询就停摆。
