container-type

Baseline 廣泛可用 *

此特性已經非常成熟，可以在許多裝置和瀏覽器版本上使用。自 2023 年 2 月起，所有主流瀏覽器均已支援。

* 此特性的某些部分可能存在不同級別的支援。

元素可以使用 container-type CSS 屬性建立為查詢容器。container-type 用於定義容器查詢中使用的容器上下文型別。可用的容器上下文有：

尺寸：根據通用尺寸或行內尺寸條件（例如最大或最小尺寸、縱橫比或方向），選擇性地將 CSS 規則應用於容器的子元素。
滾動狀態：根據滾動狀態條件（例如容器是否是部分滾動的滾動容器，或者容器是否是要吸附到其滾動吸附容器的吸附目標），選擇性地將 CSS 規則應用於容器的子元素。

注意：當使用 container-type 和 container-name 屬性時，會自動應用 contain 屬性的 style 和 layout 值。

語法

css

/* Keyword values */
container-type: normal;
container-type: size;
container-type: inline-size;
container-type: scroll-state;

/* Two values */
container-type: size scroll-state;

/* Global Values */
container-type: inherit;
container-type: initial;
container-type: revert;
container-type: revert-layer;
container-type: unset;

值

container-type 屬性可以取下面列表中的單個值，或兩個值——其中一個必須是 scroll-state，另一個可以是 inline-size 或 size。換句話說，一個元素可以被建立為尺寸查詢容器、滾動狀態查詢容器、兩者兼具，或兩者都不是。

inline-size

為容器行內軸上的尺寸查詢建立查詢容器。對元素應用佈局、樣式和行內尺寸包含。

行內尺寸包含應用於元素。元素的行內尺寸可以獨立計算，忽略子元素（請參閱使用 CSS 包含）。

normal

預設值。該元素不是任何容器尺寸查詢的查詢容器，但仍是容器樣式查詢的查詢容器。

scroll-state

為容器上的滾動狀態查詢建立查詢容器。在這種情況下，元素的尺寸不會獨立計算；不應用任何包含。

size

為容器的行內和塊尺寸的容器尺寸查詢建立查詢容器。對容器應用佈局包含、樣式包含和尺寸包含。

尺寸包含應用於元素的行內和塊方向。元素的尺寸可以獨立計算，忽略子元素。

正式定義

初始值	`normal`
應用於	所有元素
繼承性	否
計算值	同指定值
動畫型別	一種顏色

正式語法

container-type = 
  normal                                      |
  [ [ size | inline-size ] || scroll-state ]

描述

容器查詢允許您根據對容器執行的條件查詢，選擇性地應用容器內的樣式。@container at-rule 用於指定對容器執行的測試，以及如果查詢返回 true，將應用於容器內容的規則。

容器查詢測試僅對具有 container-type 屬性的元素執行，該屬性將元素定義為尺寸或滾動狀態容器，或兩者兼具。

容器尺寸查詢

容器尺寸查詢允許您根據尺寸條件（例如最大或最小尺寸、縱橫比或方向），選擇性地將 CSS 規則應用於容器的後代。

尺寸容器還會應用尺寸包含——這會關閉元素從其內容獲取尺寸資訊的能力，這對於容器查詢避免無限迴圈非常重要。如果不是這樣，容器查詢中的 CSS 規則可能會改變內容尺寸，這反過來可能會使查詢評估為假並改變父元素的尺寸，這反過來可能會改變內容尺寸並將查詢翻轉回真，依此類推。此序列將無限重複。

容器尺寸必須由上下文設定，例如擴充套件到其父元素完整寬度的塊級元素，或顯式定義。如果沒有可用的上下文或顯式尺寸，具有尺寸包含的元素將摺疊。

容器滾動狀態查詢

容器滾動狀態查詢允許您根據滾動狀態條件（例如）：

容器內容是否部分滾動。
容器是否是要吸附到滾動吸附容器的吸附目標。
容器是否透過 position: sticky 定位並粘附到滾動容器的邊界。

在第一種情況下，被查詢的容器是滾動容器本身。在其他兩種情況下，被查詢的容器是受祖先滾動容器滾動位置影響的元素。

示例

建立行內尺寸包含

給定以下 HTML 示例，它是一個帶有影像、標題和一些文字的卡片元件

html

<div class="container">
  <div class="card">
    <h3>Normal card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

<div class="container wide">
  <div class="card">
    <h3>Wider card</h3>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

要建立容器上下文，請將 container-type 屬性新增到元素。以下使用 inline-size 值來為容器的行內軸建立包含上下文

css

.container {
  container-type: inline-size;
  width: 300px;
  height: 120px;
}

.wide {
  width: 500px;
}

h3 {
  height: 2rem;
  margin: 0.5rem;
}

.card {
  height: 100%;
}

.content {
  background-color: wheat;
  height: 100%;
}

.container {
  margin: 1rem;
  border: 2px dashed red;
  overflow: hidden;
}

透過 @container at-rule 編寫容器查詢將在容器寬度超過 400px 時向容器元素應用樣式

css

@container (width > 400px) {
  .card {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

規範

規範
CSS 條件規則模組第五版 # container-type

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者在 2025 年 7 月 15 日修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題