奇技指南
今天，和大家聊一个很简单但很重要的东西：逻辑属性和逻辑值。
说它“简单”，是因为概念上简单；说它“重要”，是因为思路上重要。
本文转载自奇舞周刊，作者安佳，360搜索事业部的前端开发工程师，W3C CSS 工作组成员。
什么是逻辑属性和逻辑值？
先来看个例子。这是一段 HTML 代码：
<section>
<h2>第一章</h2>
<div>本章介绍了逻辑属性和逻辑值，这是一个演示示例。</div>
</section>
要实现下面的效果：
需要编写 CSS：
section {
text-align: left;
}
h2 {
border-left: .3em solid #ccc;
padding-left: .5em;
}
现在把中文换成阿拉伯语，因为阿拉伯语是从右至左书写的，所以预期的效果是这样的：
基于上面的 CSS，我们要做如下修改：
section {
text-align: right; /* left -> right */
}
h2 {
border-right: .3em solid #ccc; /* border-left -> border-right */
padding-right: .5em; /* padding-left -> padding-right */
}
那么，问题来了：同一个页面，在遇到不同的书写模式时，却要维护不同的代码。成本有点高。
逻辑属性和逻辑值的引入就是来解决这种问题的。我们可以只写一组 CSS 就能完美适应不同的书写模式。完整代码如下：
<style>
section {
text-align: start; /* start 逻辑值 */
}
h2 {
border-inline-start: .3em solid #ccc; /* border-inline-start 逻辑属性 */
padding-inline-start: .5em; /* padding-inline-start 逻辑属性 */
}
</style>
<section dir="auto">
<h2>第一章</h2>
<div>本章介绍了逻辑属性和逻辑值，这是一个演示示例。</div>
</section>
<section dir="auto">
<h2>الفصل الأول</h2>
<div>يقدم هذا الفصل القيم المنطقية والمنطقية ، والتي هي مثال توضيحي.</div>
</section>
在上面的 CSS 代码中：
-
text-align: start 中的 start 就是逻辑值
-
border-inline-start: .3em solid #ccc; 中的 border-inline-start 就是逻辑属性
-
padding-inline-start: .5em; 中的 padding-inline-start 也是逻辑属性
坦白讲，逻辑属性和逻辑值并没有引入新的 CSS 特性，它只是提供了一种控制布局的新方式。
哪些属性新增了逻辑值？
| 现有的 CSS 属性 | 新增的逻辑值 |
|---|---|
| text-align | start end |
| float clear | inline-start inline-end |
| caption-side | inline-start inline-end |
| resize | block inline |
CSS 属性值，有这两大类：
-
物理值，是相对页面的。包括 left right top bottom
-
逻辑值（下文也称“流相对值”），是相对内容流的。包括：
-
start end
-
inline-start inline-end inline
-
block-start block-end block
新增了哪些逻辑属性？
有这 6 个逻辑属性组：
| 序号 | 逻辑属性组 | 逻辑属性 | 备注 |
|---|---|---|---|
| 1 | 逻辑高度、逻辑宽度 | block-size inline-size | 最终对应到 width 还是 height取决于书写模式 |
| max-block-size max-inline-size | |||
| min-block-size min-inline-size | |||
| 2 | 流相对外边距 | margin-block-start margin-block-end margin-inline-start margin-inline-end | |
| margin-block margin-inline | |||
| 3 | 流相对内边距 | padding-block-start padding-block-end padding-inline-start padding-inline-end | |
| padding-block padding-inline | |||
| 4 | 流相对边框 | border-block-start-* border-block-end-* border-inline-start-* border-inline-end-* | *可以是 width style color |
| border-block-* border-inline-* | 同上 | ||
| border-block-start border-block-end border-inline-start border-inline-end | |||
| border-block border-inline | |||
| 5 | 流相对圆角 | border-start-start-radius border-start-end-radius border-end-start-radius border-end-end-radius | |
| 6 | 流相对偏移 | inset-block-start inset-block-end inset-inline-start inset-inline-end | |
| inset-block inset-inline inset |
以上表格包括单属性（longhand sub-properties）和简写属性（shorthand property）
如何计算逻辑属性和逻辑值？
-
首先，将逻辑值按照一定的规则，映射到物理值上
-
然后，逻辑属性和物理属性一起，根据 CSS 级联 的规则计算出最终的计算值（computed value）
在第一步做映射的时候，有一张表格可供参考，如下：
图片来自 Abstract-to-Physical Mappings
特别说明，逻辑属性具体映射到哪个物理属性上，这取决于元素自身的书写模式。书写模式是由这三个属性 writing-mode, direction和text-orientation 共同决定的，详见 CSS Writing Modes Level 4。
小结
本文介绍了：
-
什么是逻辑属性和逻辑值，以及它解决的主要问题
-
哪些属性新增了逻辑值
-
新增了哪些逻辑属性
-
如何计算逻辑属性和逻辑值
主要参考
https://www.w3.org/TR/2018/WD-css-logical-1-20180827
界世的你当不
只作你的肩膀
无
360官方技术公众号
技术干货|一手资讯|精彩活动
空·
喜欢记得关注哦
