用于尺寸的逻辑属性
在本指南中，我们将解释用于设置页面元素尺寸的物理维度属性和逻辑属性之间与流相关的映射关系。
在指定一个项目的尺寸时，CSS 逻辑属性和值模块让你能够根据文本流（内联和块）来指定尺寸，而不是根据物理尺寸（例如，左和右）来指定。虽然这些与流相关的映射关系很可能会成为我们许多人的默认选择，但在设计中你很可能会同时使用物理和逻辑尺寸。你可能希望某些特性无论书写模式如何，都始终与物理尺寸相关联。
尺寸的映射关系
下表提供了逻辑属性和物理属性之间的映射关系。这些映射假设你处于 horizontal-tb（从上到下水平书写）的书写模式，例如英语或阿拉伯语，在这种情况下，width 会映射到 inline-size。
如果你处于垂直书写模式，那么 inline-size 将会映射到 height。
宽度和高度示例
width 和 height 的逻辑映射是 inline-size（设置内联维度的长度）和 block-size（设置块维度的长度）。在英语环境下，用 inline-size 替换 width，用 block-size 替换 height，将会得到相同的布局。
在下面的实时示例中，writing-mode 设置为 horizontal-tb。将其更改为 vertical-rl，你会看到第一个示例（使用 width 和 height）的每个维度尺寸保持不变，尽管文本变成了垂直的。第二个示例（使用 inline-size 和 block-size）则会跟随文本方向，就好像整个块旋转了一样。
<div class="container">
<div class="physical box">I have a width of 200px and a height of 100px.</div>
<div class="logical box">
I have an inline-size of 200px and a block-size of 100px.
</div>
</div>
.box {
writing-mode: horizontal-tb;
}
.physical {
width: 200px;
height: 100px;
}
.logical {
inline-size: 200px;
block-size: 100px;
}
最小宽度和最小高度示例
min-width 和 min-height 也有对应的映射——它们是 min-inline-size 和 min-block-size。它们的工作方式与 inline-size 和 block-size 属性相同，但设置的是最小尺寸而不是固定尺寸。
尝试像第一个示例一样，将下面的示例更改为 vertical-rl，看看它有什么效果。我在第一个示例中使用了 min-height，在第二个示例中使用了 min-block-size。
<div class="container">
<div class="physical box">
I have a width of 200px and a min-height of 5em.
</div>
<div class="logical box">
I have an inline-size of 200px and a min-block-size of 5em.
</div>
</div>
.box {
writing-mode: horizontal-tb;
}
.physical {
width: 200px;
min-height: 5em;
}
.logical {
inline-size: 200px;
min-block-size: 5em;
}
最大宽度和最大高度示例
最后，你可以使用 max-inline-size 和 max-block-size 作为 max-width 和 max-height 的逻辑替代。尝试像之前一样操作下面的示例。
<div class="container">
<div class="physical box">I have a max-width of 200px.</div>
<div class="logical box">I have an max-inline-size of 200px.</div>
</div>
.box {
writing-mode: horizontal-tb;
}
.physical {
max-width: 200px;
}
.logical {
max-inline-size: 200px;
}
用于调整大小的逻辑关键字
resize 属性用于设置一个项目是否可以被调整大小，它有 horizontal 和 vertical 这两个物理值。resize 属性也有逻辑关键字值。使用 resize: inline 允许在内联维度上调整大小，而 resize: block 允许在块维度上调整大小。
无论你从物理还是逻辑角度考虑，resize 属性的关键字值 both 都能生效。它会同时设置两个维度。请尝试操作下面的示例。
<div class="container">
<div class="physical box">
I have a width of 200px and a height of 100px. I can be resized
horizontally.
</div>
<div class="logical box">
I have an inline-size of 200px and a block-size of 100px. I can be resized
in the inline direction.
</div>
</div>
.box {
writing-mode: horizontal-tb;
overflow: scroll;
}
.physical {
width: 200px;
height: 100px;
resize: horizontal;
}
.logical {
inline-size: 200px;
block-size: 100px;
resize: inline;
}