anchor-size()

可用性有限

此功能不是基线，因为它在一些最广泛使用的浏览器中不起作用。

实验性： 这是一个实验性技术
在生产环境中使用之前，请仔细查看浏览器兼容性表。

The anchor-size() CSS function enables sizing anchor-positioned elements relative to the dimensions of anchor elements. It returns the <length> of a specified side of the target anchor element. anchor() is only valid when used within the value of anchor-positioned elements' sizing properties.

有关锚点功能和用法的详细信息，请参阅 CSS 锚点定位模块登陆页面和使用 CSS 锚点定位指南。

语法

css

/* size of anchor side */
width: anchor-size(width);
block-size: anchor-size(block);
height: calc(anchor-size(self-inline) + 2em);

/* size of named anchor side */
width: anchor-size(--myAnchor width);
block-size: anchor-size(--myAnchor block);

/* size of named anchor side with fallback */
width: anchor-size(--myAnchor width, 50%);
block-size: anchor-size(--myAnchor block, 200px);

参数

anchor-size() 函数的语法如下

anchor-size(<anchor-element> <anchor-size>, <length-percentage>)

参数是

<anchor-element> 可选

您要根据其大小调整元素的锚点元素的 anchor-name 属性值。这是一个 <dashed-ident> 值。如果省略，则使用元素的默认锚点。

注意： 在 anchor-size() 函数中指定 <anchor-element> 不会将元素与锚点关联或系在一起；它只是根据该锚点的大小调整元素。

<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() 函数允许以锚元素的尺寸来表示定位元素的尺寸值；它定义了定位元素相对于其尺寸的特定锚元素的尺寸。它是尺寸属性的有效值，这些属性设置在锚定位元素上。使用时，函数将返回锚元素的 <length> 尺寸，锚元素和尺寸都是可选参数。

返回的长度是锚元素或其包含块的垂直或水平尺寸。使用的尺寸由 <anchor-size> 参数定义。如果省略该参数，则使用的尺寸将与设置其尺寸属性的轴线匹配。

用作尺寸长度基础的锚元素是 <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() 函数只是引用默认锚点的尺寸。或者，在 calc() 函数中包含 anchor-size() 函数以修改应用于定位元素的尺寸。

例如，此规则将定位元素的宽度设置为等于默认锚元素的宽度

css

.positionedElem {
  width: anchor-size(width);
}

此规则将定位元素的内联尺寸设置为锚元素内联尺寸的 4 倍，乘法在 calc() 函数中进行

css

.positionedElem {
  inline-size: calc(anchor-size(self-inline) * 4);
}

正式语法

<anchor-size()> = 
  anchor-size( [ <anchor-element> || <anchor-size> ]? , <length-percentage>? )  

<anchor-element> = 
  <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> 足够高以需要滚动，但这为了简洁起见已经隐藏。

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>
  Nisi quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. In arcu
  cursus euismod quis viverra nibh cras pulvinar. Vulputate ut pharetra sit amet
  aliquam.
</p>

html

<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>

<p>
  Malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Vel elit
  scelerisque mauris pellentesque pulvinar pellentesque habitant morbi
  tristique. Porta lorem mollis aliquam ut porttitor. Turpis cursus in hac
  habitasse platea dictumst quisque. Dolor sit amet consectetur adipiscing elit.
  Ornare lectus sit amet est placerat. Nulla aliquet porttitor lacus luctus
  accumsan.
</p>

CSS

我们通过赋予 anchor <div> 一个 anchor-name 来将其声明为锚元素。定位元素（其 position 属性设置为 fixed）通过其 position-anchor 属性与锚元素关联。我们还在锚点上设置了绝对的 height 和 width 尺寸，以便在检查定位元素尺寸时提供参考点，例如使用浏览器开发者工具

.anchor {
  font-size: 2rem;
  color: white;
  text-shadow: 1px 1px 1px black;
  background-color: hsl(240 100% 75%);
  text-align: center;
  align-content: center;
  outline: 1px solid black;
}

body {
  width: 80%;
  margin: 0 auto;
}

.infobox {
  align-content: center;
  color: darkblue;
  background-color: azure;
  outline: 1px solid #ddd;
  font-size: 1rem;
  text-align: center;
}

css

.anchor {
  anchor-name: --myAnchor;
  width: 100px;
  height: 100px;
}

.infobox {
  position-anchor: --myAnchor;
  position: fixed;
}

我们在定位元素上设置了一些不同的属性值

定位元素通过不同的 position-area 值绑定到锚点，这些值将元素定位在锚元素周围的不同位置。
第一个信息框的 height 设置为与锚元素的高度相同：anchor-size(height) 返回锚元素的高度。元素的 width 设置为锚元素宽度的两倍，使用 calc() 函数中的 anchor-size() 函数：anchor-size(width) 检索锚元素的宽度，然后将其乘以 2。
第二个信息框的 height 设置为锚元素高度的三分之二，使用类似的技术。
包含边距值以提供与锚元素的一些分离。

css

#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

浏览器兼容性

BCD 表格仅在浏览器中加载