摘要：目前为止，支持类似这种多方向网站的最佳方式，依然是使用和变量。在英文网站，宽度属性用表示，高度属性用表示。在英文网站中更多常用于，它的值升级为代替。在英文网站中，物理属性与逻辑属性的表现是一致的。
原文链接：https://medium.com/@elad/new-...
原文作者：Elad Shechter
在过去，大多数程序猿在思考布局时总是习惯于从“上下左右”的角度出发。这是因为在早期，互联网主要用于上传文档，而不是为了实现我们现在熟知的复杂网站架构。
这也是为什么没有人思考多语言网站的需求。
目前为止，支持类似 RTL/LTR 这种多方向网站的最佳方式，依然是使用 SASS 和 SASS 变量。
（如果你希望了解更多内容，可以阅读我的另一篇文章《The Best Way to RTL Websites with SASS!》）。
这些新的逻辑属性让我们能够在改动最少样式的情况下控制我们的网站，而不用担心网站使用的是何种语言（无论是英语、阿拉伯语、日语还是其他语言）。
现在让我们开始吧！
思考 CSS 逻辑属性的方式当我们讨论盒模型时，我们已经对下面这张图很熟悉了：
盒模型物理属性（旧方案）
它在以前和现在一直是正确的，但类似 margin-left, padding-right, border-top 等经典物理特性其实已经时日不多了。
在你开始使用新的逻辑属性之前，你需要停止从 left/right 或者 top/bottom来思考问题，而是使用 inline-start/inline-end 和 block-start/block-end 来替代它们。
逻辑属性（新方案）
让我们用英文作为例子，英文的阅读方向是从左到右，这是属性的内联部分。当我们想要把一系列元素排在同一行时，我们通常会使用 display: inline，照这个思路就很容易记住 inline axis 的含义了。
举例来说，padding-inline-start 会在当前语句开始位置的旁边设置一个内边距：
在英语中： padding-inline-start = padding-left
在阿拉伯语中：padding-inline-start = padding-right
在日语中： padding-inline-start = padding-top
让我们忘掉 top 和 bottom 相关属性的含义（不再表示“上下”），而是把 top 当做网站的开始，把 bottom 当做网站的结束。只要想像几个 display:block 的元素首尾相连，就很容易记住这点了。
到这时你仍然会问自己，难道这不是一贯的做法吗？
这个问题解释起来有点复杂。因为目前并没有其他解决方案，所以目前所有的网站，不管是使用的是什么语言，都是这么处理的。
要知道使用日文或者其他东方语言的网站（按布局方向）可能是从右到左，而非从上到下的！为了理解这种网站的表现，我们可以想象一下将浏览器向右旋转90度，我们会发现网站的滚动条不再是垂直方向了，它变成了水平方向！
举个例子(block cases)：
在英语和阿拉伯语中： padding-block-start = padding-top
在日语中： padding-block-start = padding-right
（日文网站）
(margin, padding and border)
在理解了 inline 和 block axis 之后，你就可以根据需要来使用它们了。
用英文网站举例来说：
margin
margin-block-start = margin-top
margin-block-end = margin-bottom
margin-inline-start = margin-left
margin-inline-end = margin-left
padding
padding-block-start = padding-top
padding-block-end = padding-bottom
padding-inline-start = padding-left
padding-liline-end = padding-right
border
border-block-start = border-top
border-block-end = border-bottom
border-inline-start = border-left
border-inline-end = border-right
Width 和 Height 被 inline-size 和 block-size 所取代。
Width 和 Height 属性同样需要适应新的尺寸表达方法。一旦我们理解了 inline/block 方法，就非常容易理解它们的尺寸要如何用新属性来表示。在英文网站，宽度属性用 inline-size 表示，高度属性用 block-size 表示。
举个栗子(inline/block size)：
在英文与阿拉伯语中(LTR/RTL)
width = inline-size
height = block-size
在一个阅读顺序是每行里自上而下的语言中，比如日语，我们会看到相反的表达方式：
inline-size = height，block-size = width。
对于 min/max 属性，只需要把 min/max 书写在属性前面：min-inline-size: 300px; max-block-size: 100px;。
新旧盒模型属性对比
top/right/bottom/left这些旧的位置属性已经发展出了一组新的属性名，它们都带有 inset 前缀，分别是：
inset-block-start / inset-inline-end / inset-block-end / inset-inline-start
在英文网站中(LTR)：
top = inset-block-start
bottom = inset-block-end
left = inset-inline-start
right = inset-inline-end
/* OLD TECHIQUE */
.popup {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
/* NEW TECHIQUE */
.popup {
position: fixed;
inset-block-start: 0; /*top - in English*/
inset-block-end: 0; /*bottom - in English*/
inset-inline-start: 0; /*left - in English*/
inset-inline-end: 0; /*right - in English*/
}
第一眼看到这些代码，你可能会质疑为什么我们需要如此复杂的命名？！其实这是有充分理由的。在新的属性名中，这些属性依然可以使用类似 padding/margin/border 的书写方式混合起来，而这种新的位置简写特性在以前是不存在的（如下所示）。
.popup{
position:fixed;
inset:0 0 0 0; /*top, right, bottom, left - in English*/
}
Float 非常简单，它只有2个值 left/right，分别用 inline-start/inline-end 来代替。
在英文网站中(LTR)：
float: left = float: inline-start
float: right = float: inline-end
它比 floats 更简单，只需要用 start/end 代替 left/right 即可。
在英文网站中(LTR)：
text-align: left = text-align: start
text-align: right = text-align: end
Resize：常用于