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 |
瀏覽器相容性
載入中…