容器组件必须显式声明container属性才能触发自适应，否则@container规则无效；需在有明确宽度限制（如width、max-width等）的元素上设置，且命名容器更可控。
容器组件必须显式声明 container 才能触发自适应
不加 container 属性，哪怕写再多 @container 规则也完全无效。这不是可选配置，是硬性前提。
常见错误是直接给卡片内部的 <div> 加 <code>container，但它的父容器没尺寸约束 —— 比如一个纯 display: block 且没设 width 或 max-width 的 div，浏览器根本无法测量 inline-size，自然不会触发查询。
- 必须在有明确宽度限制的元素上设置：
width、max-width、flex-basis、grid-template-columns等 - Flex 子项要小心
min-width: auto（默认行为），会卡住收缩 → 补min-width: 0 - 命名容器更可控：
container: card / inline-size，后续用@container card (min-width: 550px)匹配，避免多个容器类型冲突
max-width 不是容器组件，只是宽度上限控制符
很多人把 <div class="container"> 当成“容器组件”，但 Bootstrap 的 <code>.container 是 CSS 类，不是 HTML 语义标签；max-width 本身只是属性，不自动带来居中、缩限或响应行为。
典型失效场景：
-
<p></p>上直接写max-width: 600px→ 无效，因为它是内联元素，得先加display: block - Flex 子项只写
max-width: 1200px→ 可能被flex-grow撑满，需配合flex: 0 1 1200px或flex-basis: 1200px <table> 外层 div 设了 <code>max-width，表格仍溢出 → 要改table-layout: fixed+ 显式列宽- 长 URL 或 UUID 撑破容器 → 单靠
max-width不行，得加overflow-wrap: break-word - 子项默认
flex-shrink: 1，但若内容过长或字体过大，仍可能突破max-width - 可靠写法是：
flex: 0 1 1200px（不放大、可缩小、基准宽 = max-width） - 避免只写
width: 100%+max-width，在 flex 中它常被忽略 -
grid-template-columns: 1fr下，max-width基本无效 —— 改用max-inline-size: 1200px更语义准确 - 想让某列响应式收缩，优先用
minmax(300px, 1fr)或repeat(auto-fit, minmax(300px, 1fr))) - 图片响应式必须同步设
height: auto，否则比例失真；且父容器本身要有宽度约束 -
@container规则必须写在 CSS 文件或<style></style>标签里，JS 动态插入字符串 style 不解析 - 断点值应基于组件实际嵌入位置定（如侧边栏宽约 300px，模态框内常为 280px），而不是照搬视口断点
- 同一页面多个同类容器，命名比匿名更安全，避免规则意外匹配到不该响应的元素
Grid 和 Flex 下的容器宽度控制逻辑完全不同
现代布局引擎会覆盖传统盒模型规则，max-width 在不同上下文里表现差异极大，不能套用老经验。
Flex 容器中：
Grid 容器中：
HTML 模板里封装容器，关键在“边界定义”而非“结构包装”
所谓“可自适应不同布局的容器组件”，本质不是写个通用 <div class="adaptive-container"> 就完事，而是根据使用场景，在模板中提前锚定尺寸边界和容器上下文。
<p>比如一个卡片组件的 HTML 模板：</p>
<pre class="brush:php;toolbar:false;"><article class="card" style="container: card / inline-size; width: 100%; max-width: 800px;"><header></header><main></main></article></pre>
<p>这里 <code>width: 100% 让它能随父容器变化，max-width 设上限，container 启用查询能力 —— 三者缺一不可。
容易被忽略的点：
