大家好,我是楷鹏。
当你一开始看到 margin-inline
时,是不是有种似曾相识的感觉,毕竟你学过 margin
和 display: inline
,却还从来没有见过两个的结合物。
除了margin-inline
,另外还有 margin-block
,padding-inline
, padding-block
, 这种后缀带有-inline
或者-block
的属性称之为逻辑属性(logical properties)。
逻辑属性其实很简单,没啥深奥的魔法,我们来通过一个例子看一下。
首先介绍一个叫做 writting-mode
属性,它控制文字的方向,举个例子 🌰:
在这个元素中,我们放了一行简单的文字,writting-mode
默认值是 horizontal-tb
✨ 其实说默认值不太对严谨,应该是“user agent”,也就是每一个浏览器默认给的样式,就是你见到的最丑的兜底样式,关于 CSS 如何选择样式,可以见笔者之前的文章
我们修改一下 writting-mode
:
{
writing-mode: vertical-rl;
}
可以看到,文字排列方向从原来「水平地从左到右」变成「垂直地从右到左」。
好了,你大概了解了 writting-mode
,接下来我们恢复原状。
并给它添加上 border-inline
:
{
border-inline: 10px solid cadetblue;
}
cadetblue 是军蓝色
看起来实际效果相当于设置了 border-left
和 border-right
。
但当我们把 writing-mode
改为 vertical-rl
后:
效果变成了设置 border-top
和 border-bottom
。
思考一下,这里 border-inline
其实就是先判断 writting-mode
,根据它的值进行再进一步确定自己的值。
看完这个例子,大腿一拍,这不就是套了一层 if/else
逻辑判断。
那这样的好处是什么呢?
显而易见的优势是,增加了排版的灵活性,由于 border-left
、border-top
等定死一处位置的属性,border-inline
更加灵活,适时而变。
一个实际的例子就是国际化中,有些语言,像阿拉伯语和希伯来语,书写方式是从右到左书写的,用 border-inline
可以直接方便地调整样式。
好了,既然已经了解逻辑属性的奥秘,我们需要来补充一下其他细节
border-inline
实际上border-inline-start
和border-inline-end
的缩写形式。- 不仅
writing-mode
,逻辑属性还会受direction
和text-orientation
影响。
Reference
One more thing:
{
"公众号": "程序员楷鹏",
"简介": "世界有 10 种人,一种是懂二进制的,另外一种是不懂的",
"还有": "你肯定会关注的对吧彦祖?"
}