資訊專欄INFORMATION COLUMN
摘要：目前為止，支持類似這種多方向網(wǎng)站的最佳方式，依然是使用和變量。在英文網(wǎng)站，寬度屬性用表示，高度屬性用表示。在英文網(wǎng)站中更多常用于，它的值升級(jí)為代替。在英文網(wǎng)站中，物理屬性與邏輯屬性的表現(xiàn)是一致的。
原文鏈接：https://medium.com/@elad/new-...
原文作者：Elad Shechter
在過去，大多數(shù)程序猿在思考布局時(shí)總是習(xí)慣于從“上下左右”的角度出發(fā)。這是因?yàn)樵谠缙?，互?lián)網(wǎng)主要用于上傳文檔，而不是為了實(shí)現(xiàn)我們現(xiàn)在熟知的復(fù)雜網(wǎng)站架構(gòu)。
這也是為什么沒有人思考多語言網(wǎng)站的需求。
目前為止，支持類似 RTL/LTR 這種多方向網(wǎng)站的最佳方式，依然是使用 SASS 和 SASS 變量。
（如果你希望了解更多內(nèi)容，可以閱讀我的另一篇文章《The Best Way to RTL Websites with SASS!》）。
這些新的邏輯屬性讓我們能夠在改動(dòng)最少樣式的情況下控制我們的網(wǎng)站，而不用擔(dān)心網(wǎng)站使用的是何種語言（無論是英語、阿拉伯語、日語還是其他語言）。
現(xiàn)在讓我們開始吧！
思考 CSS 邏輯屬性的方式當(dāng)我們討論盒模型時(shí)，我們已經(jīng)對(duì)下面這張圖很熟悉了：
盒模型物理屬性（舊方案）
它在以前和現(xiàn)在一直是正確的，但類似 margin-left, padding-right, border-top 等經(jīng)典物理特性其實(shí)已經(jīng)時(shí)日不多了。
在你開始使用新的邏輯屬性之前，你需要停止從 left/right 或者 top/bottom來思考問題，而是使用 inline-start/inline-end 和 block-start/block-end 來替代它們。
邏輯屬性（新方案）
讓我們用英文作為例子，英文的閱讀方向是從左到右，這是屬性的內(nèi)聯(lián)部分。當(dāng)我們想要把一系列元素排在同一行時(shí)，我們通常會(huì)使用 display: inline，照這個(gè)思路就很容易記住 inline axis 的含義了。
舉例來說，padding-inline-start 會(huì)在當(dāng)前語句開始位置的旁邊設(shè)置一個(gè)內(nèi)邊距：
在英語中：?????? padding-inline-start = padding-left
在阿拉伯語中：padding-inline-start = padding-right
在日語中： ????? padding-inline-start = padding-top
讓我們忘掉 top 和 bottom 相關(guān)屬性的含義（不再表示“上下”），而是把 top 當(dāng)做網(wǎng)站的開始，把 bottom 當(dāng)做網(wǎng)站的結(jié)束。只要想像幾個(gè) display:block 的元素首尾相連，就很容易記住這點(diǎn)了。
到這時(shí)你仍然會(huì)問自己，難道這不是一貫的做法嗎？
這個(gè)問題解釋起來有點(diǎn)復(fù)雜。因?yàn)槟壳安]有其他解決方案，所以目前所有的網(wǎng)站，不管是使用的是什么語言，都是這么處理的。
要知道使用日文或者其他東方語言的網(wǎng)站（按布局方向）可能是從右到左，而非從上到下的！為了理解這種網(wǎng)站的表現(xiàn)，我們可以想象一下將瀏覽器向右旋轉(zhuǎn)90度，我們會(huì)發(fā)現(xiàn)網(wǎng)站的滾動(dòng)條不再是垂直方向了，它變成了水平方向！
舉個(gè)例子(block cases)：
在英語和阿拉伯語中： padding-block-start = padding-top
在日語中：??????padding-block-start = padding-right
（日文網(wǎng)站）
(margin, padding and border)
在理解了 inline 和 block axis 之后，你就可以根據(jù)需要來使用它們了。
用英文網(wǎng)站舉例來說：
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 屬性同樣需要適應(yīng)新的尺寸表達(dá)方法。一旦我們理解了 inline/block 方法，就非常容易理解它們的尺寸要如何用新屬性來表示。在英文網(wǎng)站，寬度屬性用 inline-size 表示，高度屬性用 block-size 表示。
舉個(gè)栗子(inline/block size)：
在英文與阿拉伯語中(LTR/RTL)
width = inline-size
height = block-size
在一個(gè)閱讀順序是每行里自上而下的語言中，比如日語，我們會(huì)看到相反的表達(dá)方式：
inline-size = height，block-size = width。
對(duì)于 min/max 屬性，只需要把 min/max 書寫在屬性前面：min-inline-size: 300px; max-block-size: 100px;。
新舊盒模型屬性對(duì)比
top/right/bottom/left這些舊的位置屬性已經(jīng)發(fā)展出了一組新的屬性名，它們都帶有 inset 前綴，分別是：
inset-block-start / inset-inline-end / inset-block-end / inset-inline-start
在英文網(wǎng)站中(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*/
}
第一眼看到這些代碼，你可能會(huì)質(zhì)疑為什么我們需要如此復(fù)雜的命名？！其實(shí)這是有充分理由的。在新的屬性名中，這些屬性依然可以使用類似 padding/margin/border 的書寫方式混合起來，而這種新的位置簡寫特性在以前是不存在的（如下所示）。
.popup{
position:fixed;
inset:0 0 0 0; /*top, right, bottom, left - in English*/
}
Float 非常簡單，它只有2個(gè)值 left/right，分別用 inline-start/inline-end 來代替。
在英文網(wǎng)站中(LTR)：
float: left = float: inline-start
float: right = float: inline-end
它比 floats 更簡單，只需要用 start/end 代替 left/right 即可。
在英文網(wǎng)站中(LTR)：
text-align: left = text-align: start
text-align: right = text-align: end
Resize：常用于