contain-intrinsic-width
语法
/* Keyword values */
contain-intrinsic-width: none;
/* <length> values */
contain-intrinsic-width: 1000px;
contain-intrinsic-width: 10rem;
/* auto <length> */
contain-intrinsic-width: auto 300px;
/* Global values */
contain-intrinsic-width: inherit;
contain-intrinsic-width: initial;
contain-intrinsic-width: revert;
contain-intrinsic-width: revert-layer;
contain-intrinsic-width: unset;
值
可以为元素指定以下值。
none
-
元素没有固有宽度。
<length>
-
元素具有指定的宽度 (
<length>
)。 auto <length>
-
如果存在“正常渲染”的元素宽度且元素正在跳过其内容(例如,当它在屏幕外时),则为该值的记住值;否则为指定的
<length>
。
描述
此属性通常与可以触发尺寸约束的元素一起应用,例如 contain: size
和 content-visibility
,并且也可以使用 contain-intrinsic-size
简写属性 设置。
尺寸约束允许用户代理将元素布局为具有固定大小,通过避免重新渲染子元素以确定实际大小来防止不必要的重排(从而改善用户体验)。默认情况下,尺寸约束将元素视为没有内容,并且可能以与内容没有宽度或高度相同的方式折叠布局。contain-intrinsic-width
属性允许作者指定一个适当的值作为布局的宽度。
auto <length>
值允许存储元素的宽度,如果元素曾经“正常渲染”(及其子元素),然后在元素跳过其内容时使用该值而不是指定的宽度。这允许具有 content-visibility: auto
的屏幕外元素受益于尺寸约束,而无需开发人员对其元素大小的估计过于精确。如果正在渲染子元素,则不会使用记住的值(如果启用了尺寸约束,则将使用 <length>
)。
正式定义
正式语法
示例
除了下面的示例之外,contain-intrinsic-size
页面包含一个实时示例,演示了修改固有宽度和高度的效果。
设置固有宽度
下面的 HTML 定义了一个元素“contained_element”,该元素将受尺寸约束,并且包含一个子元素。
<div id="contained_element">
<div class="child_element"></div>
</div>
下面的 CSS 将 contained_element
的 content-visibility
设置为 auto
,因此,如果元素隐藏,它将受到尺寸约束。使用 contain-intrinsic-width
和 contain-intrinsic-height
分别设置在尺寸约束时使用的宽度和高度。
#contained_element {
border: 2px solid green;
width: 151px;
content-visibility: auto;
contain-intrinsic-width: 152px;
contain-intrinsic-height: 52px;
}
.child_element {
border: 1px solid red;
background: blue;
height: 50px;
width: 150px;
}
规范
规范 |
---|
CSS 盒子大小模块级别 4 # propdef-contain-intrinsic-width |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。