contain-intrinsic-block-size

语法

/* 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;
}

规范

浏览器兼容性

另见

• content-visibility：提升渲染性能的全新 CSS 属性 (web.dev)
• contain-intrinsic-inline-size
• contain-intrinsic-size
• contain-intrinsic-width
• contain-intrinsic-height