用于大小的逻辑属性
本指南将解释页面上元素大小的物理尺寸属性与逻辑属性之间的流动相关映射。
在指定项目大小时，CSS 逻辑属性和值 模块允许您指示大小与文本的流动（内联和块）相关，而不是与水平和垂直（例如左和右）的物理尺寸相关的物理大小。尽管这些流相关的映射可能成为我们许多人的默认值，但在设计中，您可能会同时使用物理大小和逻辑大小。您可能希望某些功能始终与物理尺寸相关，无论写入模式如何。
尺寸映射
下表提供了逻辑属性和物理属性之间的映射。这些映射假设您处于 horizontal-tb 写入模式，例如英语或阿拉伯语，在这种情况下，width 将映射到 inline-size。
如果您处于垂直写入模式，那么 inline-size 将映射到 height。
宽度和高度示例
width 和 height 的逻辑映射是 inline-size，它设置内联尺寸的长度，以及 block-size，它设置块尺寸的长度。在使用英语时，将 width 替换为 inline-size，将 height 替换为 block-size 将产生相同的布局。
在下面的实时示例中，writing-mode 设置为 horizontal-tb。将其更改为 vertical-rl，您将看到第一个示例（使用 width 和 height）在每个维度中保持相同的大小，尽管文本变为垂直方向。第二个示例（使用 inline-size 和 block-size）将遵循文本方向，就好像整个块已旋转。
最小宽度和最小高度示例
对于 min-width 和 min-height 也有映射 - 它们是 min-inline-size 和 min-block-size。它们的工作方式与 inline-size 和 block-size 属性相同，但设置最小值而不是固定值。
尝试将下面的示例更改为 vertical-rl，与第一个示例一样，查看它产生的影响。我在第一个示例中使用 min-height，在第二个示例中使用 min-block-size。
最大宽度和最大高度示例
最后，您可以使用 max-inline-size 和 max-block-size 作为 max-width 和 max-height 的逻辑替换。尝试以与以前相同的方式播放下面的示例。
用于调整大小的逻辑关键字
resize 属性设置项目是否可以调整大小，并且具有 horizontal 和 vertical 的物理值。resize 属性还具有逻辑关键字值。使用 resize: inline 允许在内联维度调整大小，而 resize: block 允许在块维度调整大小。
无论您从物理上还是逻辑上考虑，both 属性的关键字值都对调整大小属性有效。它同时设置两个维度。尝试玩一下下面的示例。