必须显式声明 container-type，否则 @container 规则不生效；浏览器默认不将任何元素视为可查询容器，需父元素主动通过 container-type: inline-size 等声明资格，且不可用于 display: contents 或 display: none 元素。
必须显式声明 container-type，否则 @container 规则完全不生效。
为什么写了 @container 却没反应？
浏览器默认不把任何元素当作可查询容器——@container 不是“写完就跑”，它需要父元素主动申领资格。最常见错误就是只写查询规则，却漏掉关键声明。
-
container-type: inline-size是绝大多数场景的必需项，它告诉浏览器：“请测量我的宽度，并开放查询接口” -
container-type: block-size可查高度，但仅 Chrome 117+ 稳定支持，Safari/Firefox 仍受限 - 不能靠
display类型判断：div、section、甚至span都能当容器，只要加了container-type - 别套在
display: contents或display: none元素上——它们不生成布局盒，无法测量尺寸
container-name 要不要设？
命名不是必须的，但能避免冲突和误触发。匿名查询（即不设 container-name）只匹配最近的、满足 container-type 的祖先，适合简单单层结构；一旦组件可能被嵌套或复用，命名就变得关键。
- 推荐用语义化名字，比如
container-name: card、container-name: stat-panel - 多个同类组件并列时，名字重复会导致所有同名容器同时响应——要么用唯一值（如
card-1），要么直接省略名字改用匿名查询 - 简写写法
container: card / inline-size可一行搞定，但注意斜杠前后顺序不能颠倒
Flex/Grid 容器里怎么用？
别直接给 display: flex 或 display: grid 的父容器加 container-type——它的子项尺寸由算法动态分配，inline-size 往往不可靠或为 0。
- 正确做法：在 Flex/Grid 的直接子元素上设容器，比如卡片外层
.card-wrapper，而不是.grid-container - 如果要对 Grid 项做响应式控制，每个
.grid-item内部再包一层div并设container-type: inline-size - 确认父级没加
overflow: hidden、min-width: auto或flex: 1这类限制测量的属性 - 加
contain: layout style size能强化边界稳定性，尤其内容动态加载时防止查询错位
@container 里的单位和条件怎么写？
@container 只认绝对单位和百分比，不支持 em、rem；断点逻辑也和 @media 不同，它只关心容器当前尺寸，不感知视口。
- 常用单位：
px（最稳妥）、%（仅当容器本身有明确百分比宽时才可靠） - 支持组合条件：
@container (inline-size > 400px) and (block-size ，但 <code>block-size兼容性差，慎用 - 不能嵌套在
@media块里，也不能反过来；两者可共存，但职责分明：@media控页面骨架，@container控组件细节 - gap 不计入
inline-size计算，但 padding 和 border 会计入——box-sizing设置会影响结果
真正难的不是语法，而是让容器尺寸稳定可测：Flex 项的 min-width: auto、Grid 的隐式轨道、浮动或绝对定位都会悄悄破坏测量基础。写完 container-type 后，先检查父容器是否真有确定的宽高，再看查询是否生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
