逻辑属性

一种非常常见的界面模式是带有辅助内联图标的文本标签。

该图标位于文本左侧,两者之间有一小段间距, 由 margin-right 提供。 不过,有个问题 因为只有文本方向为从左到右时,这种方法才有效。 如果文本方向改为从右到左(这是阿拉伯语等语言的阅读方向),则该图标将位于文本旁边。

您在 CSS 中如何考虑这一点? 逻辑属性可帮助您解决这些问题。其优势包括免费提供自动的国际化支持。 它们可帮助您构建弹性更佳、更具包容性的前端。

术语

顶部、右侧、底部和左侧的物理属性指的是视口的物理尺寸。 您可以将其视为地图上的罗盘。 另一方面,逻辑属性 是指方框的边缘,因为它们与内容的流动有关。 因此,如果文本方向或书写模式发生变化,它们也可能会发生变化。 这是相对于定向样式的巨大转变 它为我们设置界面样式提供了更大的灵活性。

屏蔽数据流

块流是指内容块的放置方向。 例如,如果有两个段落,则第二个段落将进入“屏蔽”流程。 在英语文档中,屏蔽流程是从上到下显示。 不妨将其看作自上而下、连续的文本段落。

三个块、div 元素、一个向下箭头,标记为“块流”

内嵌流程

内嵌流是指文本在句子中的流动方式。 在英语文档中,内嵌流程从左到右。 如果您要将网页的文档语言更改为阿拉伯语 (<html lang="ar">), 那么内联流程就应该是从右到左

三个文字“她卖贝壳”,一个从左向右的箭头,标记为“inline flow”

文本按照文档的书写模式确定的方向流动。 您可以使用 writing-mode 属性更改文本的布局方向。 此操作可以应用于整个文档,也可以应用于单个元素。

相对流量

过去在 CSS 中 我们只能应用相对于边线方向的边距等属性。 例如,margin-top 应用于元素的实际顶部。 具有逻辑属性后,margin-top 会变为 margin-block-start。 这意味着,无论语言和文本方向如何, 屏蔽流程都有适当的外边距规则。

一张示意图,显示了所有不同大小的盒子以及每个大小调整部分的开始和结束

大小

为防止元素超出特定宽度或高度, 因此可以编写如下规则:

.my-element {
  max-width: 150px;
  max-height: 100px;
}

相对流的等效项是 max-inline-sizemax-block-size。 您也可以使用 min-block-sizemin-inline-size,而不是 min-heightmin-width

利用逻辑属性 最大宽度和高度规则将如下所示:

.my-element {
  max-inline-size: 150px;
  max-block-size: 100px;
}

开始和结束

与使用“顶部”、“右侧”、“底部”和“左侧”等方向相比, 使用 start 和 end 属性。这会提供 block-start、inline-end、block-end 和 inline-start。 通过这些属性,您可以应用 CSS 属性来响应书写模式变化。

例如,要将文本右对齐,您可以使用以下 CSS:

p {
  text-align: right;
}

如果你的目标不是与身体右对齐 而是从阅读方向开始 这没有帮助。 通过逻辑值,可将 startend 值映射到文本方向,从而提供更多实用信息。 文本对齐规则现在如下所示:

p {
  text-align: end;
}

间距和位置

marginpaddinginset 的逻辑属性 可以更加轻松高效地设置元素的位置,以及确定这些元素如何在各种书写模式中相互交互。 与外边距和内边距相关的属性仍是到路线的直接映射, 但主要区别在于,书写模式发生变化时,模式也会随之改变。

.my-element {
  padding-top: 2em;
  padding-bottom: 2em;
  margin-left: 2em;
  position: relative;
  top: 0.2em;
}

这会使用 padding 添加一些内部垂直空间,并使用 margin 将其从左侧推出。 top 属性也会将其向下移动。 如果使用等效的逻辑属性,则结果将如下所示:

.my-element {
  padding-block-start: 2em;
  padding-block-end: 2em;
  margin-inline-start: 2em;
  position: relative;
  inset-block-start: 0.2em;
}

这会使用 padding 添加一些内联空间,并使用 margin 将其从内嵌开头将其推出。 inset-block 属性从 block-start 向内移动。

inset-block 属性不是具有逻辑属性的唯一简写选项。 此规则可以进一步精简, 使用简写版本的 margin 和 padding 属性。

.my-element {
  padding-block: 2em;
  margin-inline: 2em 0;
  position: relative;
  inset-block: 0.2em 0;
}

边框

还可以使用逻辑属性添加 borderborder-radius。 要在底部和右侧添加边框,并设置右侧半径,您可以编写如下规则:

.my-element {
  border-bottom: 1px solid red;
  border-right: 1px solid red;
  border-bottom-right-radius: 1em;
}

或者,您可以使用如下逻辑属性:

.my-element {
  border-block-end: 1px solid red;
  border-inline-end: 1px solid red;
  border-end-end-radius: 1em;
}

border-end-end-radius 中的 end-end 是块结束和内嵌结束。

单位

逻辑属性引入了两个新单元:vivbvi 单位是内嵌方向视口大小的 1%。 等效的非逻辑属性为 vwvb 单位是块方向上视口的 1%。 等效的非逻辑属性为 vh

这些单位将始终映射到阅读方向。 例如,如果您希望某个元素占据视口可用内嵌空间的 80%, 如果书写模式为竖直,则使用 vi 单元会自动将该大小切换为从上到下。

切实有效地使用逻辑属性

逻辑属性和写入模式不仅仅用于国际化。 您可以使用它们来创建功能更丰富的界面。

如果您的图表的 X 轴和 Y 轴上分别有标签, 您可能想让 Y 标签中的文字垂直显示。

由于演示中的 Y 轴标签的 writing-modevertical-rl, 则可以在两个标签上使用相同的 margin 值。 margin-block-start 值同时适用于这两个标签 因为区块的起始位置在 Y 轴右侧,在 X 轴顶部。 代码块起始边有红色边框,因此您可以看到。

解决图标问题

我们已经介绍了逻辑属性, 这些知识可以应用到我们一开始就提出的设计问题。

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.5em;
  flex: none;
}

已在图标元素的右侧应用外边距。 为了使图标和文字之间的间距支持所有阅读方向, 需要改用 margin-inline-end 属性。

p {
  display: inline-flex;
  align-items: center;
}

p svg {
  width: 1.2em;
  height: 1.2em;
  margin-inline-end: 0.5em;
  flex: none;
}

现在,无论阅读方向如何 系统会适当地确定图标的位置和间距。

检查您的理解情况

测试您对逻辑属性的知识

用手写字时,您的手腕正在沿哪个逻辑轴移动?

block
inline

选中可受益于逻辑属性的所有项

颜色
alignment
方框边角
阴影
sizes
方框边

字词的哪个逻辑部分有下划线?

禁播开始
内嵌结束
内嵌开头
屏蔽结束