必须显式设置 container-type: inline-size 才能启用 @container 查询，否则规则静默失效；@container 检测的是 content box 宽度，受 padding、border 和 box-sizing 影响；常见问题包括父元素未设 container-type、误用单位或尺寸未稳定导致闪动。
@container 规则本身不写在 HTML 里
HTML 文件中不能直接使用 @container，它不是 HTML 标签或属性，也不是通过 container="size" 这类自定义属性启用的。所有容器查询逻辑都由 CSS 控制：必须在父元素的 CSS 样式中显式声明 container-type，子元素才能用 @container 查询其尺寸。
常见误操作包括：
- 在
<div class="card">上加container="card"—— 浏览器完全忽略，无效 - 只写
@container (min-width: 400px) { ... }，但父元素 CSS 没设container-type: inline-size—— 规则静默失效，无报错 - 把
container-type加在祖父级（如.layout），而实际要查的是中间层.card-container—— 容器查询只认“最近的、带container-type的祖先”，不会穿透
父容器必须显式设置 container-type: inline-size
container-type 是硬性前提，缺了它整个链路就断了。不能靠 display: grid 或 width: 300px 自动触发，也不能靠 container-name 单独生效。
- 优先用
container-type: inline-size：监听行内方向（通常是宽度），兼容性好（Chrome 105+、Safari 16.4+、Firefox 110+） - 避免
container-type: size：需同时满足宽高约束，旧版支持差，且容易因高度未定导致查询失效 - 不要设
container-type: normal：这是默认值，不启用任何查询能力 - 如果父容器是
display: contents或visibility: hidden，它没有渲染盒，container-type也无效
@container 中的 min-width 查的是 content box 宽度
@container (min-width: 320px) 不是比对元素的 offsetWidth 或 computedStyle.width，而是其内容区（content box）可用的行内尺寸。这个值受 padding、border 和 box-sizing 直接影响。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 若容器样式为
width: 352px; padding: 16px; box-sizing: border-box，content box 宽度 = 352px − 32px = 320px，此时才匹配min-width: 320px - 单位只推荐
px或%（仅当父容器有明确尺寸时），避免用em（行为未定义） - 不用
width: 320px精确匹配——它极少成立，响应式逻辑依赖区间判断，min-width/max-width才是正解
React/Vue 组件里 @container 样式“闪一下”的原因
这不是 CSS 写错了，而是容器尺寸在首次渲染时未稳定：图片加载中、字体未就绪、JS 动态插入内容都会让父容器初始宽度为 0 或异常值，导致 @container 初始不匹配，等尺寸回正后才触发重计算，造成视觉跳变。
- 简单缓解：给父容器设最小宽高（如
min-width: 0; min-height: 0），避免 collapse - 更可靠方案：配合
ResizeObserver在 JS 中监听尺寸变化，再通过 CSS 变量注入真实宽度（如--actual-width: 320），@container内用var(--actual-width)做辅助判断 - 服务端渲染（SSR）场景下，务必确保首屏 HTML 中父容器已有合理尺寸（比如占位图、skeleton），否则客户端 hydration 后必然闪动
真正卡住多数人的从来不是语法，而是“为什么写了却没反应”——90% 的问题出在父容器漏了 container-type: inline-size，或者查的尺寸和你想象的不是一回事。动手前先用 DevTools 检查那个父元素的 computed 样式里有没有 container-type，再看它的 layout tab 里 content box 宽度是否符合预期。
