anchor-size()
anchor-size() CSS 函数使得锚定定位元素的尺寸、位置和外边距可以相对于锚元素的尺寸进行设置。它返回目标锚元素指定边的 <length>。anchor-size() 仅在锚定定位元素的尺寸、内边距和外边距属性的值中使用时才有效。
有关锚点特性的详细信息和用法，请参阅 CSS 锚点定位模块登录页和使用 CSS 锚点定位指南。
语法
/* sizing relative to anchor side */
width: anchor-size(width);
block-size: anchor-size(block);
height: calc(anchor-size(self-inline) + 2em);
/* sizing relative to named anchor's side */
width: anchor-size(--my-anchor width);
block-size: anchor-size(--my-anchor block);
/* sizing relative to named anchor's side with fallback */
width: anchor-size(--my-anchor width, 50%);
block-size: anchor-size(--my-anchor block, 200px);
/* positioning relative to anchor side */
left: anchor-size(width);
inset-inline-end: anchor-size(--my-anchor height, 100px);
/* setting margin relative to anchor side */
margin-left: calc(anchor-size(width) / 4);
margin-block-start: anchor-size(--my-anchor self-block, 20px);
参数
anchor-size() 函数的语法如下：
anchor-size(<anchor-name> <anchor-size>, <length-percentage>)
参数为：
<anchor-name>可选-
你希望元素的尺寸、位置或外边距相对其设置的锚元素的
anchor-name属性值。这是一个<dashed-ident>值。如果省略，将使用元素的默认锚。备注：在
anchor-size()函数内指定<anchor-name>既不会将元素与锚关联，也不会将其绑定到锚；它只定义元素的属性值应相对于哪个锚进行设置。 <anchor-size>可选-
指定定位元素的属性值将相对其设置的锚元素的维度。有效值包括：
width-
锚元素的宽度。
height-
锚元素的高度。
block-
锚元素包含块在块方向上的长度。
inline-
锚元素包含块在内联方向上的长度。
self-block-
锚元素在块方向上的长度。
self-inline-
锚元素在内联方向上的长度。
备注：如果省略此参数，维度将默认为与包含该函数的属性的轴相匹配的
<anchor-size>关键字。例如，width: anchor-size();等同于width: anchor-size(width);。 <length-percentage>可选-
指定在元素不是绝对定位或固定定位，或者锚元素不存在时用作回退值的大小。如果在需要使用回退值的情况下省略此参数，则该声明无效。
备注：定位元素的属性值所相对的锚维度不必与正在设置的尺寸值在同一轴上。例如，width: anchor-size(height) 是有效的。
返回值
返回一个 <length> 值。
描述
anchor-size() 函数使定位元素的尺寸、位置和外边距值能够以锚元素的尺寸来表示；它返回一个 <length> 值，该值表示定位元素的属性值所相对的特定锚元素的维度。对于设置在锚定定位元素上的尺寸、内边距和外边距属性，这是一个有效值。
返回的长度是锚元素或其包含块的垂直或水平尺寸。所使用的维度由 <anchor-size> 参数定义。如果省略该参数，则使用的维度将与设置它的尺寸、位置或外边距属性的轴相匹配。因此，例如：
width: anchor-size()等同于width: anchor-size(width)。top: anchor-size()等同于top: anchor-size(height)。margin-inline-end: anchor-size()等同于margin-inline-end: anchor-size(self-inline)。在水平书写模式下，margin-inline-end: anchor-size()也等同于margin-inline-end: anchor-size(width)；在垂直书写模式下，则等同于margin-inline-end: anchor-size(height)。
用作维度长度基准的锚元素是具有在 <anchor-name> 参数中指定的 anchor-name 的元素。如果多个元素具有相同的锚名称，则使用 DOM 顺序中最后一个具有该锚名称的元素。
如果函数调用中未包含 <anchor-name> 参数，则使用元素的默认锚，该锚在其 position-anchor 属性中引用，或通过 anchor HTML 属性与元素关联。
如果包含了 <anchor-name> 参数，但没有与该锚名称匹配的元素，则使用回退值。如果没有包含回退值，则该声明将被忽略。例如，如果在定位元素上指定了 width: anchor-size(--foo width, 50px); height: anchor-size(--foo width);，但 DOM 中不存在名为 --foo 的锚，则 width 将为 50px，而 height 声明将无效。
如果一个元素的尺寸、位置或外边距属性设置了 anchor-size() 值，但它不是一个锚定定位元素（即其 position 属性未设置为 absolute 或 fixed，或者没有通过其 position-anchor 属性与锚关联），则如果提供了回退值，将使用回退值。如果没有提供回退值，则该声明将被忽略。
例如，如果在定位元素上指定了 width: anchor-size(width, 50px);，但没有与它关联的锚，则将使用回退值，因此 width 的计算值将为 50px。
有关锚点特性的详细信息和用法，请参阅 CSS 锚点定位模块登录页和使用 CSS 锚点定位指南。
接受 anchor-size() 函数值的属性
接受 anchor-size() 函数作为值的属性包括：
- 尺寸属性
- 内边距属性
- 外边距属性
在 calc() 中使用 anchor-size()
你将使用的最常见的 anchor-size() 函数只会引用默认锚的维度。另外，也可以将 anchor-size() 函数包含在 calc() 函数中，以修改应用于定位元素的尺寸。
例如，此规则将定位元素的宽度设置为与默认锚元素的宽度相等：
.positionedElem {
width: anchor-size(width);
}
此规则将定位元素的内联尺寸设置为锚元素内联尺寸的 4 倍，乘法在 calc() 函数内完成：
.positionedElem {
inline-size: calc(anchor-size(self-inline) * 4);
}
正式语法
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<length-percentage> =
<length> |
<percentage>
示例
anchor-size() 的基本用法
此示例展示了两个相对于一个锚定位的元素，并使用 anchor-size() 函数确定其尺寸。
HTML
我们指定了三个 <div> 元素，一个 anchor 元素和两个我们将相对于该锚定位的 infobox 元素。我们还包含了一些填充文本，使 <body> 足够高以需要滚动，但为了简洁起见，这部分已被隐藏。
<div class="anchor">⚓︎</div>
<div class="infobox" id="infobox1">
<p>This is the first infobox.</p>
</div>
<div class="infobox" id="infobox2">
<p>This is the second infobox.</p>
</div>
CSS
我们通过给 anchor <div> 一个 anchor-name 将其声明为锚元素。定位元素的 position 属性设置为 fixed，并通过它们的 position-anchor 属性与锚元素关联。我们还在锚上设置了绝对的 height 和 width 尺寸，以便在使用浏览器开发者工具等检查定位元素尺寸时提供参考点：
.anchor {
anchor-name: --my-anchor;
width: 100px;
height: 100px;
}
.infobox {
position-anchor: --my-anchor;
position: fixed;
}
我们为定位元素设置了一些不同的属性值：
- 定位元素通过不同的
position-area值与锚绑定，这些值将元素定位在锚元素周围的不同位置。 - 第一个信息框的
height设置为与锚元素相同的高度：anchor-size(height)返回锚元素的高度。元素的width在calc()函数内使用anchor-size()函数设置为锚元素宽度的两倍：anchor-size(width)获取锚元素的宽度，然后乘以二。 - 第二个信息框的
height使用类似的技术设置为锚元素高度的三分之二。 - 包含了外边距值，以提供与锚元素的一些间距。
#infobox1 {
position-area: right;
height: anchor-size(height);
width: calc(anchor-size(width) * 2);
margin-left: 5px;
}
#infobox2 {
position-area: top span-right;
height: calc(anchor-size(height) / 1.5);
margin-bottom: 5px;
}
结果
使用你的浏览器工具检查锚定定位元素。第一个信息框将是 100px 高和 200px 宽，而第二个信息框的高度约为 66.7px，其 width 将默认为 max-content。
位置和外边距示例
规范
| 规范 |
|---|
| CSS 锚点定位 # anchor-size-fn |
浏览器兼容性
加载中…