容器查询不生效的主因是父元素未设container-type: inline-size；它只认最近带该声明的祖先，测量content box宽度，且container-property须与container-type同规则声明。
容器查询不生效，90% 的情况是父元素根本没被浏览器识别为容器——@container 规则会被静默忽略，不报错、不警告，只“假装没看见”。
父容器没设 container-type: inline-size
这是最硬性前提：CSS 容器查询不会自动推断任何元素为容器，body、div、section 都不行。必须显式写：
-
.card { container-type: inline-size; }✅（唯一广泛支持的取值） -
.card { container-type: size; }❌（需宽高都稳定，仅 Chromium 117+ 稳定支持，开销大） <div container-type="inline-size"> ❌（这是 HTML 属性，浏览器完全无视） <li> <code>.card { container-type: block-size; }❌（尚未被主流引擎支持）- 若
.card { width: 352px; padding: 16px; box-sizing: border-box; }→ content box 宽 = 352px − 32px = 320px -
@container (min-width: 320px)才会匹配，而不是min-width: 352px - 避免用
%、em、calc()—— 行为未定义或不兼容；vw可用但需谨慎（依赖视口） -
width: 320px是精确匹配，响应式逻辑应始终用min-width或max-width -
display: contents或visibility: hidden→ 元素无渲染盒，container-type彻底无效 - Flex/Grid 子项设了
container-type，但父容器用flex: 1+min-width: 0把它压到 0 宽 → 查询结果永远是 0px - 把
container-type加在body上 → 它通常不构成独立格式化上下文，声明无效 - React/Vue 组件封装时没透传 class → 子组件的
@container找不到宿主容器 - 必须在同一 CSS 规则里声明：
.card { container-type: inline-size; container-property: --gap: 12px; }✅ - 不能分开写：
.card { container-type: inline-size; }+.card { container-property: --gap: 12px; }❌（后者无效） - 只能在
@container块里用style(--gap)读取，不能在普通规则里var(--gap) - 数值必须带单位：
--gap: 12❌，--gap: 12px✅
@container 查的是 content box 宽度，不是你写的 width
它测量的是 padding 内侧、border 内侧的可用行内尺寸，和 box-sizing、padding 强相关：
中间某层破坏了盒模型或尺寸链
容器查询只认「最近的、带 container-type 的祖先」，断一层就失效：
container-property 和 style(--prop) 搭配出错
想传参却读不到？限制很严格：
最容易被忽略的点：它不继承、不穿透、不报错，只沉默失效——检查时得一层层确认 computed style 里的 container-type 是否真实存在，而不是只看源码写了没。
