contain-intrinsic-block-size
contain-intrinsic-block-size CSS 邏輯屬性定義了當元素受限於尺寸約束時，瀏覽器可用於佈局的元素的塊大小。
塊大小是元素在垂直於行內文字流方向上的尺寸。在像標準英語這樣的水平書寫模式中，塊大小是垂直方向（高度）；在垂直書寫模式中，塊大小是水平方向。
語法
/* Keyword values */
contain-intrinsic-block-size: none;
/* <length> values */
contain-intrinsic-block-size: 1000px;
contain-intrinsic-block-size: 10rem;
/* auto <length> */
contain-intrinsic-block-size: auto 300px;
/* Global values */
contain-intrinsic-block-size: inherit;
contain-intrinsic-block-size: initial;
contain-intrinsic-block-size: revert;
contain-intrinsic-block-size: revert-layer;
contain-intrinsic-block-size: unset;
值
以下值可指定元素的固有塊大小：
none-
元素沒有固有塊大小。
<length>-
元素具有指定的塊大小，使用 (
<length>) 資料型別表示。 auto <length>-
當元素處於尺寸約束並跳過其內容（例如，當它在螢幕外且設定了
content-visibility: auto）時，塊大小會記住元素上次能夠渲染其子元素時的實際大小。如果元素從未渲染其子元素，因此沒有正常渲染元素大小的記住值，或者如果它沒有跳過其內容，則塊大小是指定的<length>。
描述
該屬性通常與可以觸發尺寸限制的元素一起使用，例如 contain: size 和 content-visibility。
尺寸約束允許使用者代理像對待具有固定尺寸的元素一樣進行佈局。這透過避免重新渲染子元素來確定實際尺寸（從而改善使用者體驗），防止不必要的重排。預設情況下，尺寸約束將元素視為沒有內容，並可能以與內容沒有寬度或高度相同的方式摺疊佈局。contain-intrinsic-block-size 屬性允許作者指定一個合適的值作為佈局的塊大小。
auto <length> 值允許在元素“正常渲染”（包含其子元素）時儲存其塊大小，然後在元素沒有內容時使用儲存的值代替指定的值。這使得帶有content-visibility: auto 的螢幕外元素可以從尺寸約束中受益，而開發人員無需精確估計元素尺寸。如果子元素正在渲染，則不使用記住的值；如果啟用了尺寸約束，將使用 <length> 值。
正式定義
正式語法
contain-intrinsic-block-size =
auto? [ none | <length [0,∞]> ]
示例
設定固有塊大小
下面的 HTML 定義了一個將受到尺寸約束的元素“contained_element”，該元素包含一個子元素。
<div id="contained_element">
<div class="child_element"></div>
</div>
以下 CSS 將 contained_element 的 content-visibility 設定為 auto，因此如果元素被隱藏，它將受到尺寸約束。當它受到尺寸約束時使用的固有塊大小和行內大小分別使用 contain-intrinsic-block-size 和 contain-intrinsic-inline-size 同時設定。
#contained_element {
border: 2px solid green;
inline-size: 151px;
content-visibility: auto;
contain-intrinsic-inline-size: 152px;
contain-intrinsic-block-size: 52px;
}
.child_element {
border: 1px solid red;
background: blue;
block-size: 50px;
inline-size: 150px;
}
規範
| 規範 |
|---|
| CSS Box Sizing Module Level 4 # propdef-contain-intrinsic-block-size |
瀏覽器相容性
載入中…