對映的屬性和值
下表詳細列出了本指南中討論的邏輯屬性和值，以及它們與物理屬性和值的對映。它們假設是水平的 writing-mode，方向為從左到右。
| 邏輯屬性或值 | 物理屬性或值 |
|---|---|
float: inline-start |
float: left |
float: inline-end |
float: right |
clear: inline-start |
clear: left |
clear: inline-end |
clear: right |
inset-inline-start |
left |
inset-inline-end |
right |
inset-block-start |
top |
inset-block-end |
bottom |
text-align: start |
text-align: left |
text-align: end |
text-align: right |
除了這些已對映的屬性之外，還有一些額外的簡寫屬性，它們透過能夠處理塊級和內聯維度而成為可能。除了 inset 屬性外，這些屬性沒有對映到物理屬性。
| 邏輯屬性 | 用途 |
|---|---|
inset-inline |
同時設定內聯維度的上述兩個插入值。 |
inset-block |
同時設定塊維度的上述兩個插入值。 |
inset |
透過多值物理對映同時設定所有四個插入值。 |
浮動和清除示例
用於 float 和 clear 屬性的物理值為 left、right 和 both。CSS 邏輯屬性和值模組將 inline-start 和 inline-end 值定義為 left 和 right 的對映。
在下面的示例中，第一個框使用 float: left 浮動，第二個框使用 float: inline-start 浮動。如果您將 direction: rtl 應用於 .inner 選擇器，則左浮動的框始終保持在左側，而 inline-start 浮動的專案則遵循文字的 direction。您可以將其與 writing-mode: vertical-rl 結合使用，以檢視塊佈局與 direction 值結合時的區別。
<div class="container">
<div class="inner">
<div class="physical box"></div>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale.
</div>
<div class="inner">
<div class="logical box"></div>
Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce
kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter
purslane kale.
</div>
</div>
.inner {
/* direction: rtl; */
/* writing-mode: vertical-rl; */
}
.physical {
float: left;
}
.logical {
float: inline-start;
}
示例：定位佈局的插入屬性
CSS 定位通常允許我們以相對於其包含塊的方式定位元素 — 我們本質上是相對於元素在正常流中應該出現的位置來插入專案。要將元素相對於視口定位，請使用物理屬性 top、right、bottom 和 left。當您希望定位與您的書寫模式中的文字流相關時，請改用 inset-block-start、inset-block-end、inset-inline-start 和 inset-inline-end。
這些屬性接受長度或百分比作為值，並與使用者的螢幕尺寸相關。
在下面的示例中，inset-block-start 和 inset-inline-end 屬性用於使用絕對定位在帶有灰色虛線邊框（具有 position: relative）的區域內定位藍色框。將 writing-mode 屬性更改為 vertical-rl，或新增 direction: rtl，然後檢視流相對框如何隨文字方向移動。
<div class="container">
<div class="inner">
<div class="physical box"></div>
</div>
<div class="inner">
<div class="logical box"></div>
</div>
</div>
.inner {
writing-mode: horizontal-tb;
}
.physical {
position: absolute;
top: 20px;
right: 0;
}
.logical {
position: absolute;
inset-block-start: 20px;
inset-inline-end: 0;
}
新的兩值和四值簡寫
與模組中的其他屬性一樣，我們有簡寫屬性，可以同時設定兩個或四個值。
inset— 使用物理對映同時設定所有四個邊。inset-inline— 設定所有邏輯內聯插入。inset-block— 設定所有邏輯塊插入。
示例：text-align 的邏輯值
text-align 屬性具有與文字方向相關的邏輯值 — 您可以使用 start 和 end 而不是 left 和 right。在下面的示例中，第一個塊設定為 text-align: right，第二個塊設定為 text-align: end。
如果您將 direction 的值更改為 rtl，您會看到第一個塊的對齊方式仍然在右側，但第二個塊的對齊方式則在左側的邏輯末端。
<div class="container">
<div class="inner physical">Aligned text</div>
<div class="inner logical">Aligned text</div>
</div>
.inner {
direction: ltr;
}
.physical {
text-align: right;
}
.logical {
text-align: end;
}
當使用使用開始和結束而不是物理方向進行對齊的盒對齊時，這種方法更具一致性。