容器查询中的容器类型（inline-size, size, normal）

container-type定义容器的查询维度和CSS Containment限制级别。

三种容器类型

inline-size类型

定义

只查询内联方向尺寸（水平书写模式下为宽度）。

.card-container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card {
    display: flex;
  }
}

Containment限制

触发Layout Containment和Inline Containment：

.container {
  container-type: inline-size;
}

/* 效果：
1. Layout Containment：内部布局不影响外部
2. Inline Containment：行内内容被隔离
3. 可查询内联尺寸
4. 不限制高度查询（无尺寸Containment）
*/

适用场景

• 响应式卡片、列表
• 组件宽度自适应
• 单方向布局切换

.sidebar {
  container-type: inline-size;
}

@container (min-width: 200px) {
  .nav-item {
    display: flex;
    align-items: center;
  }
}

inline-size是最常用的类型，性能开销较小。

size类型

定义

同时查询宽度和高度。

.modal-container {
  container-type: size;
  width: 500px;
  height: 400px;
}

@container (min-width: 300px) and (min-height: 200px) {
  .modal {
    padding: 32px;
  }
}

@container (orientation: portrait) {
  .modal {
    flex-direction: column;
  }
}

Containment限制

触发完整Containment：

.container {
  container-type: size;
}

/* 效果：
1. Size Containment：元素尺寸固定，不计入子元素
2. Layout Containment：内部布局隔离
3. Style Containment：样式计算隔离
4. Inline Containment：行内内容隔离
*/

完整Containment含义

适用场景

• 固定尺寸容器内的组件
• 需要查询高度的布局
• orientation查询

.dashboard-panel {
  container-type: size;
  width: 100%;
  height: 400px;
}

@container (min-height: 300px) {
  .panel-content {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
}

normal类型

定义

不启用查询能力，无Containment限制。

.container {
  container-type: normal;
}

/* 效果：
1. 不触发任何Containment
2. 不能被@container查询
3. 可以作为命名容器（配合container-name）
*/

与默认行为一致

未设置container-type时默认为normal。

/* 以下等效 */
.box {}
.box { container-type: normal; }

使用场景

• 仅需要命名容器（配合container-name）
• 不需要尺寸查询
• 保持正常布局行为

/* 命名容器但不查询尺寸 */
.theme-container {
  container-name: theme;
  container-type: normal;
}

/* 不存在尺寸查询，但可被其他方式引用 */

类型选择指南

简写语法

container属性可同时设置类型和名称：

/* 分开写 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 简写 */
.card-container {
  container: card / inline-size;
}

Containment副作用

Size Containment注意

.size-container {
  container-type: size;
}

.float-child {
  float: left;
}

/* 问题：父元素高度不包含浮动子元素 */
/* 解决：显式设置高度 */
.size-container {
  height: 200px;
}

Layout Containment效果

.layout-container {
  container-type: inline-size;
}

/* 效果：
- overflow: hidden行为
- 新的绝对定位包含块
- 固定定位元素相对于容器而非视口
*/

性能对比

推荐：优先使用inline-size，仅在需要高度查询时使用size。

要点总结

1. inline-size：只查询内联尺寸，最常用，性能最优
2. size：查询双向尺寸，触发完整Containment
3. normal：无查询能力，可配合命名使用
4. size类型下浮动子元素不影响父元素高度
5. 优先选择inline-size以获得更好性能