contain-intrinsic-block-size

基线 2023

最新可用

自 2023 年 9 月起，此功能在最新的设备和浏览器版本中都能正常使用。此功能可能在旧设备或浏览器中无法正常使用。

**contain-intrinsic-block-size** CSS 逻辑属性 定义了元素的块大小，浏览器在元素受到 大小包含 约束时，可以将其用于布局。

块大小是在垂直于一行中文本流的方向上的元素大小。在水平 书写模式（如标准英语）中，块大小是垂直尺寸（高度）；在垂直书写模式中，块大小是水平尺寸。

语法

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

元素没有固有块大小。

<长度>

<长度>

元素具有指定的大小，以 (<长度>) 数据类型表示。

auto <长度>

描述

当元素处于大小包含状态并跳过其内容（例如，当元素位于屏幕外且设置了 content-visibility: auto）时，块大小将从元素上次能够渲染其子元素时的实际大小中记忆。如果元素从未渲染过其子元素，因此没有记忆的正常渲染元素大小值，或者如果它没有跳过其内容，则块大小为指定的 <长度>。

此属性通常与可以触发大小包含的元素一起使用，例如 contain: size 和 content-visibility。

大小包含允许用户代理将元素布局得好像它具有固定大小一样。这通过避免重新渲染子元素来确定实际大小（从而改善用户体验）来防止不必要的重排。默认情况下，大小包含将元素视为没有内容，并且可能像内容没有宽度或高度一样折叠布局。contain-intrinsic-block-size 属性允许作者指定一个适当的值，该值用作布局的块大小。

正式定义

auto <长度> 值允许在元素被“正常渲染”（带有其子元素）时存储元素的块大小，然后在元素没有内容时使用它，而不是使用指定的值。这允许具有 content-visibility: auto 的屏幕外元素从大小包含中受益，而无需开发人员对元素大小进行精确估计。如果正在渲染子元素，则不会使用记忆的值；如果启用了大小包含，则将使用 <长度> 值。none
初始值应用于
可以应用大小包含的元素继承
否计算值
按指定方式，带有已计算的 <长度> 值动画类型

正式语法

contain-intrinsic-block-size = 
  auto? [ none | <length> ]

示例

按计算值的类型

以下 HTML 定义了一个名为 "contained_element" 的元素，该元素将受到尺寸约束，并且包含一个子元素。

html
<div id="contained_element">
  <div class="child_element"></div>
</div>

以下 CSS 将 contained_element 的 content-visibility 设置为 auto，因此，如果元素被隐藏，它将受到尺寸约束。在尺寸约束时使用的内在块大小和内在内联大小分别使用 contain-intrinsic-block-size 和 contain-intrinsic-inline-size 设置。

css
#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 盒模型模块级别 4
# propdef-contain-intrinsic-block-size

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅