CSS 播客 - 012:逻辑属性
一种非常常见的界面模式是带有辅助内联图标的文本标签。
该图标位于文本左侧,两者之间有一小段间距,
由 margin-right
提供。
不过,有个问题
因为只有文本方向为从左到右时,这种方法才有效。
如果文本方向改为从右到左(这是阿拉伯语等语言的阅读方向),则该图标将位于文本旁边。
您在 CSS 中如何考虑这一点? 逻辑属性可帮助您解决这些问题。其优势包括免费提供自动的国际化支持。 它们可帮助您构建弹性更佳、更具包容性的前端。
术语
顶部、右侧、底部和左侧的物理属性指的是视口的物理尺寸。 您可以将其视为地图上的罗盘。 另一方面,逻辑属性 是指方框的边缘,因为它们与内容的流动有关。 因此,如果文本方向或书写模式发生变化,它们也可能会发生变化。 这是相对于定向样式的巨大转变 它为我们设置界面样式提供了更大的灵活性。
屏蔽数据流
块流是指内容块的放置方向。 例如,如果有两个段落,则第二个段落将进入“屏蔽”流程。 在英语文档中,屏蔽流程是从上到下显示。 不妨将其看作自上而下、连续的文本段落。
内嵌流程
内嵌流是指文本在句子中的流动方式。
在英语文档中,内嵌流程从左到右。
如果您要将网页的文档语言更改为阿拉伯语 (<html lang="ar">
),
那么内联流程就应该是从右到左
文本按照文档的书写模式确定的方向流动。
您可以使用 writing-mode
属性更改文本的布局方向。
此操作可以应用于整个文档,也可以应用于单个元素。
相对流量
过去在 CSS 中
我们只能应用相对于边线方向的边距等属性。
例如,margin-top
应用于元素的实际顶部。
具有逻辑属性后,margin-top
会变为 margin-block-start
。
这意味着,无论语言和文本方向如何,
屏蔽流程都有适当的外边距规则。
![一张示意图,显示了所有不同大小的盒子以及每个大小调整部分的开始和结束](https://web-dot-google-developers.gonglchuangl.net/static/learn/css/logical-properties/image/a-diagram-showing-the-di-12ce9bdac4132.png?hl=zh-cn)
大小
为防止元素超出特定宽度或高度, 因此可以编写如下规则:
.my-element {
max-width: 150px;
max-height: 100px;
}
相对流的等效项是 max-inline-size
和 max-block-size
。
您也可以使用 min-block-size
和 min-inline-size
,而不是 min-height
和 min-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;
}
如果你的目标不是与身体右对齐
而是从阅读方向开始
这没有帮助。
通过逻辑值,可将 start
和 end
值映射到文本方向,从而提供更多实用信息。
文本对齐规则现在如下所示:
p {
text-align: end;
}
间距和位置
margin
、padding
和 inset
的逻辑属性
可以更加轻松高效地设置元素的位置,以及确定这些元素如何在各种书写模式中相互交互。
与外边距和内边距相关的属性仍是到路线的直接映射,
但主要区别在于,书写模式发生变化时,模式也会随之改变。
.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;
}
边框
还可以使用逻辑属性添加 border
和 border-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
是块结束和内嵌结束。
单位
逻辑属性引入了两个新单元:vi
和 vb
。
vi
单位是内嵌方向视口大小的 1%。
等效的非逻辑属性为 vw
。
vb
单位是块方向上视口的 1%。
等效的非逻辑属性为 vh
。
这些单位将始终映射到阅读方向。
例如,如果您希望某个元素占据视口可用内嵌空间的 80%,
如果书写模式为竖直,则使用 vi
单元会自动将该大小切换为从上到下。
切实有效地使用逻辑属性
逻辑属性和写入模式不仅仅用于国际化。 您可以使用它们来创建功能更丰富的界面。
如果您的图表的 X 轴和 Y 轴上分别有标签, 您可能想让 Y 标签中的文字垂直显示。
由于演示中的 Y 轴标签的 writing-mode
为 vertical-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;
}
现在,无论阅读方向如何 系统会适当地确定图标的位置和间距。
检查您的理解情况
测试您对逻辑属性的知识
用手写字时,您的手腕正在沿哪个逻辑轴移动?
inline
block
选中可受益于逻辑属性的所有项
flex-start
、block-end
和 inline-start
block-start
和 inline
。inline-size
和 max-block-size
。border-end-end-radius
。字词的哪个逻辑部分有下划线?