CSS 播客 - 012：逻辑属性
一种非常常见的界面模式是带有辅助内联图标的文本标签。
该图标位于文本左侧，两者之间有一小段间距，
由 margin-right 提供。
不过，有个问题
因为只有文本方向为从左到右时，这种方法才有效。
如果文本方向改为从右到左（这是阿拉伯语等语言的阅读方向），则该图标将位于文本旁边。
您在 CSS 中如何考虑这一点？ 逻辑属性可帮助您解决这些问题。其优势包括免费提供自动的国际化支持。 它们可帮助您构建弹性更佳、更具包容性的前端。
术语
顶部、右侧、底部和左侧的物理属性指的是视口的物理尺寸。 您可以将其视为地图上的罗盘。 另一方面，逻辑属性 是指方框的边缘，因为它们与内容的流动有关。 因此，如果文本方向或书写模式发生变化，它们也可能会发生变化。 这是相对于定向样式的巨大转变 它为我们设置界面样式提供了更大的灵活性。
屏蔽数据流
块流是指内容块的放置方向。 例如，如果有两个段落，则第二个段落将进入“屏蔽”流程。 在英语文档中，屏蔽流程是从上到下显示。 不妨将其看作自上而下、连续的文本段落。
内嵌流程
内嵌流是指文本在句子中的流动方式。
在英语文档中，内嵌流程从左到右。
如果您要将网页的文档语言更改为阿拉伯语 (<html lang="ar">)，
那么内联流程就应该是从右到左
文本按照文档的书写模式确定的方向流动。
您可以使用 writing-mode 属性更改文本的布局方向。
此操作可以应用于整个文档，也可以应用于单个元素。
相对流量
过去在 CSS 中
我们只能应用相对于边线方向的边距等属性。
例如，margin-top 应用于元素的实际顶部。
具有逻辑属性后，margin-top 会变为 margin-block-start。
这意味着，无论语言和文本方向如何，
屏蔽流程都有适当的外边距规则。