映射的属性和值
下表详细列出了本指南中讨论的逻辑属性和值，以及它们与物理属性和值的映射。它们假设是水平的 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;
}
当使用使用开始和结束而不是物理方向进行对齐的盒对齐时，这种方法更具一致性。