container-type 必须显式声明，否则 @container 规则静默失效；唯一实用取值是 inline-size，需通过 css 在父元素选择器中设置，且容器尺寸必须稳定才能正确触发查询。
container-type 必须显式声明，否则 @container 规则静默失效
写了 @container (min-width: 400px) 却没反应？不是语法错，也不是浏览器不支持，而是父元素根本没被识别为查询容器——container-type 漏了。浏览器不会自动推断，也不会报错，规则直接被忽略。
-
container-type: inline-size是唯一实用且广泛支持的取值（Chrome 105+、Safari 16.4+、Firefox 110+），监听容器的行内方向尺寸（通常是 width） -
container-type: size要求宽高同时稳定，目前仅 Chromium 117+ 稳定支持，且需 layout 触发开销大，生产环境慎用 -
container-type: normal是默认值，等于没开；container-type: block-size对高度响应支持极差，Safari 基本不认 - 别在
:root或body上试——它们通常不构成独立格式化上下文，声明无效
不能写在 HTML 标签里，必须通过 CSS 设置
container-type 是 CSS 属性，不是 HTML 属性。往 <div container-type="inline-size"> 或 <code><div container="card/inline-size"> 里加，浏览器完全无视。
<ul>
<li>正确做法：在父元素的选择器中声明，例如 <code>.card { container-type: inline-size; }
container: card / inline-size 合法，但要注意斜杠不能漏，写成 container: card inline-size 会解析失败container-type 的祖先”，不会向上穿透查找；如果中间层没设，祖父级设了也没用display: contents 或 visibility: hidden，它没有渲染盒，container-type 失效查的是 content box 宽度，受 box-sizing 和 padding 影响
@container (min-width: 320px) 匹配的不是元素的 offsetWidth，而是其 content box 的行内尺寸。这个值会实实在在被 padding 和 border 扣减。
- 例如容器样式为
width: 352px; padding: 16px; box-sizing: border-box，content box 宽度 = 352px − 32px = 320px，此时才匹配min-width: 320px - 单位只推荐
px、em、rem；%表示“自身宽度的百分比”，50%恒为真，慎用；vw、calc()、em（在 font-size 未继承时行为未定义）都不该用 -
width: 320px是精确匹配，几乎无实用价值；响应式逻辑依赖区间判断，始终用min-width或max-width
Flex/Grid 子项当容器时，容易被布局压扁导致查询失效
把 container-type: inline-size 加在 Flex 或 Grid 的直接子项上可行，但极易因父布局收缩而查不到预期宽度。
- Flex 子项若没设
min-width且flex-shrink: 1，可能被压缩到几像素，@container查到的宽度远小于视觉所见 - Grid 子项若没配
grid-template-columns，宽度由内容撑开，加载过程中尺寸抖动，引发样式闪动 - 调试时，在 DevTools 中选中目标容器 → Elements 面板右侧 Layout 标签页 → 查看 “Container query container” 是否打钩；没勾说明声明没生效
- 避免在图片未加载完、字体未就绪、JS 动态插入内容前触发查询；必要时用
contain: layout style提前确立布局边界
min-inline-size: 0 或 align-items: start 这类隐性约束。
