改變CSS世界縱橫規(guī)則的writing-mode屬性
?
2016.09.12 13:28*?字?jǐn)?shù) 5347?閱讀 57評(píng)論 0喜歡 0
byzhangxinxufromhttp://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=5352
一分预、冉冉升起的writing-mode
writing-mode這個(gè)CSS屬性宵距，我們是不是很少見(jiàn)到蔗候，很少用到犬耻！我們往往稱(chēng)不常見(jiàn)的東西為“生僻”，就像是不常見(jiàn)的文字我們叫“生僻字”协怒，因此不常見(jiàn)的CSS屬性诚镰，我們可以叫做“生僻屬性”俺泣，writing-mode給我們的感覺(jué)就是一個(gè)“生僻屬性”，很弱较锡，可有可無(wú)业稼。
但是，實(shí)際上蚂蕴，我們都錯(cuò)了低散，大錯(cuò)特錯(cuò)俯邓，writing-mode很弱？臥槽熔号，別開(kāi)玩笑了稽鞭，writing-mode可以說(shuō)是CSS世界里面最逆天的CSS屬性了，直接顛覆CSS世界的眾多規(guī)則引镊。
而writing-mode之所以給人“生僻”的感覺(jué)朦蕴，是有原因的。
實(shí)際上writing-mode這個(gè)CSS屬性在上古時(shí)代就誕生了弟头，IE5.5瀏覽器就已經(jīng)支持了：
那就奇怪了吩抓！writing-mode既然這么鳥(niǎo)，同時(shí)時(shí)間早赴恨，資格老疹娶，為啥一直沉寂了差不多20年呢？
那是因?yàn)槁琢诤荛L(zhǎng)一段時(shí)間里雨饺，F(xiàn)ireFox, Chrome這些現(xiàn)代瀏覽器都不支持writing-mode，writing-mode基本上就是IE瀏覽器的私有產(chǎn)物除师，大家對(duì)IE一直沒(méi)啥好感沛膳，對(duì)吧，愛(ài)屋及烏由此及彼汛聚，自然對(duì)writing-mode也不待見(jiàn)锹安。
然而，就在我們被流行前端技術(shù)一葉蔽目的時(shí)候倚舀，各大現(xiàn)代瀏覽器紛紛對(duì)writing-mode實(shí)現(xiàn)了更加標(biāo)準(zhǔn)的支持（主要得益于FireFox瀏覽器的積極跟進(jìn)）叹哭，也就是說(shuō)，不知什么時(shí)候起痕貌，writing-mode的兼容性已經(jīng)不成問(wèn)題了风罩，加上該屬性本身特性逆天，我去舵稠，我仿佛看到了一個(gè)冉冉升起的新星超升，不對(duì)，是新月哺徊，而且是圓月室琢。
二、writing-mode的原本作用
和float屬性有些類(lèi)似落追，writing-mode原本設(shè)計(jì)的是控制內(nèi)聯(lián)元素的顯示的（即所謂的文本布局-Text Layout）盈滴。因?yàn)樵趤喼蓿绕湎裰袊?guó)這樣的東亞國(guó)家轿钠，存在文字的排版不是水平式的巢钓，而是垂直的病苗，例如中國(guó)的古詩(shī)古文。
因此症汹，writing-mode就是用來(lái)實(shí)現(xiàn)文字可以豎著呈現(xiàn)的硫朦。
您可以狠狠地點(diǎn)擊這里：CSS writing-mode與文字垂直排版demo
截自IE11瀏覽器IE8模式：
writing-mode語(yǔ)法
writing-mode的語(yǔ)法學(xué)習(xí)相比其他CSS屬性要高一些，因?yàn)槲覀冃枰涀商撞煌恼Z(yǔ)法背镇。一個(gè)是IE私有屬性阵幸，第二個(gè)是CSS3規(guī)范屬性。
先看下未來(lái)所需的CSS3語(yǔ)法：
/* 關(guān)鍵字值 */writing-mode: horizontal-tb;/* 默認(rèn)值 */writing-mode: vertical-rl;writing-mode: vertical-lr;/* 全局值-關(guān)鍵字inherit IE8+芽世，initial和unset IE13才支持 */writing-mode:inherit;writing-mode:initial;writing-mode:unset;
各個(gè)關(guān)鍵字屬性值的含義挚赊，我們透明名稱(chēng)就能知道其大概的意思，例如济瓢，默認(rèn)值horizontal-tb表示荠割，文本流是水平方向(horizontal)的，元素是從上往下(tb:top-bottom)堆疊的旺矾。
vertical-rl表示文本是垂直方向(vertical)展示蔑鹦，然后閱讀的順序是從右往左(rl:right-left)，跟我們古詩(shī)的閱讀順序一致箕宙。
vertical-lr表示文本是垂直方向(vertical)展示嚎朽，然后閱讀的順序還是默認(rèn)的從左往右(lr:left-right)，也就是僅僅是水平變垂直柬帕。
下面是各個(gè)值下的中英文表現(xiàn)對(duì)照（參考自MDN）：
//zxx: 大家會(huì)發(fā)現(xiàn)英文字符橫過(guò)來(lái)了哟忍，可以試試使用text-orientation:upright讓其直立，IE不支持陷寝，F(xiàn)ireFox, Chrome支持锅很。
下面來(lái)看下老IE瀏覽器的語(yǔ)法，由于歷史原因凤跑，顯得相當(dāng)?shù)膹?fù)雜爆安，IE官方文檔顯示如下：
-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb
根據(jù)自己的測(cè)試（非原生IE8,IE9），-ms-私有前綴是可缺省的仔引，直接writing-mode所以IE瀏覽器都是支持的扔仓。-ms-writing-mode這種寫(xiě)法IE7瀏覽器是不支持的，但是官方有如下說(shuō)明：
Windows Internet Explorer 7. The rl-tb, and bt-rl values are available to the -ms-writing-mode
就是說(shuō)IE7的-ms-writing-mode可以使用rl-tb和bt-rl這兩個(gè)值咖耘，但這和自己的測(cè)試不符翘簇，我覺(jué)得可能是原生IE7瀏覽器，但我沒(méi)有原生IE7鲤看，沒(méi)有進(jìn)行過(guò)測(cè)試缘揪，因此耍群，此說(shuō)法（原生IE7支持）只是自己的推測(cè)义桂。
我扳指頭數(shù)了數(shù)找筝，IE瀏覽器下的關(guān)鍵字值多達(dá)11個(gè)，正好可以組個(gè)足球隊(duì)慷吊，
lr-tb
IE7+瀏覽器支持袖裕。初始值。內(nèi)容從左往右(left-right)溉瓶，從上往下(top-bottom)水平流動(dòng)急鳄，以及下一行水平元素在上一行元素的下面，所有符號(hào)都是直立定位堰酿。大部分的書(shū)寫(xiě)系統(tǒng)都是使用這種布局疾宏。
rl-tb
IE7+瀏覽器支持。內(nèi)容從右往左(right-left触创，從上往下(top-bottom)水平流動(dòng)坎藐，以及下一行水平元素在上一行元素的下面，所有符號(hào)都是直立定位哼绑。這種布局適合從右往左書(shū)寫(xiě)的語(yǔ)言岩馍，例如阿拉伯語(yǔ)，希伯來(lái)語(yǔ)抖韩，塔安那文蛀恩，和敘利亞語(yǔ)。
tb-rl
IE7+瀏覽器支持茂浮。內(nèi)容從上往下(top-bottom)双谆，從右往左(right-left)垂直流動(dòng)， 下一個(gè)垂直行定位于前一個(gè)垂直行的左邊席揽，全角符號(hào)直立定位佃乘，非全角符號(hào)(也可以被稱(chēng)作窄拉丁文或者窄假名符號(hào))順時(shí)針?lè)较蛐D(zhuǎn)90°。這種布局多見(jiàn)于東亞排版驹尼。
bt-rl
IE7+瀏覽器支持趣避。內(nèi)容從下往上(bottom-top)，從右往左(right-left)垂直流動(dòng)新翎， 下一個(gè)垂直行定位于前一個(gè)垂直行的左邊程帕，全角符號(hào)直立定位，非全角符號(hào)(也可以被稱(chēng)作窄拉丁文或者窄假名符號(hào))順時(shí)針?lè)较蛐D(zhuǎn)90°地啰。此布局多見(jiàn)于在東亞垂直排版從右往左的文本塊上愁拭。
tb-lr
IE8+瀏覽器支持。 內(nèi)容從上往下(top-bottom)亏吝，從左往右(left-right)垂直流動(dòng)岭埠。下一個(gè)垂直行在前一個(gè)的右邊。
bt-lr
IE8+瀏覽器支持。 內(nèi)容從下往上(bottom-top)惜论，從左往右(left-right)垂直流動(dòng)许赃。
lr-bt
IE8+瀏覽器支持。 內(nèi)容從下往上(bottom-top)馆类，從左往右(left-right)水平流動(dòng)混聊。下一個(gè)水平行在前一行的上面。
rl-bt
IE8+瀏覽器支持乾巧。內(nèi)容從下往上(bottom-top)句喜， 從右往左(right-left)水平流動(dòng)。
lr
IE9+瀏覽器支持沟于。在SVG和HTML元素上使用咳胃。等同于lr-tb.
rl
IE9+瀏覽器支持。在SVG和HTML元素上使用旷太。等同于rl-tb.
tb
IE9+瀏覽器支持拙绊。在SVG和HTML元素上使用。等同于tb-rl.
各個(gè)屬性值的表現(xiàn)如下（form微軟官網(wǎng)）
一些說(shuō)明：
相同的writing-mode屬性值并不會(huì)累加泳秀，例如父子均設(shè)置了writing-mode:tb-rl标沪，只會(huì)渲染一次，子元素并不會(huì)2次“旋轉(zhuǎn)”嗜傅。
IE瀏覽器下金句，一個(gè)自身具有布局的元素（不是純文本之類(lèi)元素）如果writing-mode屬性值和父元素不同，當(dāng)子元素的布局流變化的時(shí)候吕嘀，其父元素坐標(biāo)系統(tǒng)的可用空間會(huì)被充分利用违寞。左邊文字太過(guò)術(shù)語(yǔ)，大家可能不懂偶房，我解釋下就是趁曼，IE瀏覽器下，當(dāng)布局元素從水平變成垂直的時(shí)候（舉個(gè)例子）棕洋，你就想象為元素在垂直方向是100%自適應(yīng)父元素高度的挡闰。所以，IE瀏覽器下(不包括IE13+)掰盘，元素vertical流的時(shí)候會(huì)發(fā)現(xiàn)高度高的嚇人摄悯，布局和其他現(xiàn)代瀏覽器不一樣，就是這個(gè)原因愧捕。
Chrome瀏覽器下目前還需要-webkit-私有前綴奢驯，雖然Chrome和Opera認(rèn)識(shí)tb-rl等老的IE屬性值，但是次绘，僅僅是認(rèn)識(shí)而已瘪阁，根本不鳥(niǎo)撒遣，沒(méi)有任何效果，聾子的耳朵——擺設(shè)管跺！
需要關(guān)注的writing-mode屬性值
從著眼于直接開(kāi)發(fā)的角度而言义黎，雖然IE支持多達(dá)11個(gè)私有的屬性值，但是伙菜，我們需要關(guān)注的，也就那么幾個(gè)命迈，那究竟是哪幾個(gè)呢贩绕？
如果你的項(xiàng)目需要兼容IE7，則只有關(guān)注這兩個(gè)值就可以了：初始值lr-tb和tb-rl壶愤，對(duì)應(yīng)于CSS3規(guī)范中的horizontal-tb和vertical-rl淑倾！其他9個(gè)屬性值就讓它們?nèi)ミ^(guò)家家好了。
如果你的項(xiàng)目只需要兼容IE8+征椒，恭喜你娇哆，你可以和CSS3規(guī)范屬性完全對(duì)應(yīng)上了，而且IE8下的writing-mode要比IE7強(qiáng)大的多勃救。我們需要關(guān)注：初始值lr-tb,tb-rl以及tb-lr碍讨，分別對(duì)應(yīng)于CSS3中的horizontal-tb,vertical-rl以及vertical-lr。
看上去復(fù)雜的屬性是不是變得很簡(jiǎn)單了蒙秒，重新整一個(gè)實(shí)戰(zhàn)版：
writing-mode: lr-tb | tb-rl | tb-lr (IE8+);
writing-mode: horizontal-tb | vertical-rl | vertical-lr;
對(duì)勃黍，大家只要記住上面幾個(gè)就可以了，enough! 因?yàn)樗^的垂直排版晕讲，實(shí)際web開(kāi)發(fā)是很少很少遇到的覆获。
有同學(xué)可能要疑問(wèn)了，既然writing-mode實(shí)現(xiàn)文本垂直排版場(chǎng)景下瓢省，那還有什么學(xué)習(xí)的意義呢弄息？
前面也提到了，雖然writing-mode創(chuàng)造的本意是文本布局勤婚，但是摹量，其帶來(lái)的文檔流向的改變，不僅改變了我們多年來(lái)正常的CSS認(rèn)知馒胆，同時(shí)可以巧妙實(shí)現(xiàn)很多意想不到的需求和效果荆永。
三、writing-mode不經(jīng)意改變了哪些規(guī)則国章？
writing-mode將頁(yè)面默認(rèn)的水平流改成了垂直流具钥，顛覆了很多我們以往的認(rèn)知，基于原本水平方向才適用的規(guī)則全部都可以在垂直方向適用液兽！
1. 水平方向也能margin重疊
W3C文檔margin重疊之一：
The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
清清楚楚寫(xiě)的bottom margin和top margin會(huì)重疊骂删；然而掌动，這是CSS2文檔中的描述，在CSS3的世界中宁玫，由于writing-mode的存在粗恢，這種說(shuō)法就不嚴(yán)謹(jǐn)了，應(yīng)該是對(duì)立流方向的margin值會(huì)發(fā)生重疊欧瘪。換句話(huà)說(shuō)眷射，如果元素是默認(rèn)的水平流，則垂直margin會(huì)重疊佛掖；如果元素是垂直流妖碉，則水平margin會(huì)重疊。
您眼見(jiàn)為實(shí)芥被，您可以狠狠地點(diǎn)擊這里：CSS writing-mode與margin水平重疊demo
結(jié)果：
2. 可以使用margin:auto實(shí)現(xiàn)垂直居中
我們應(yīng)該都是的欧宜，傳統(tǒng)的web流中，margin設(shè)置auto值的時(shí)候拴魄，只有水平方向才會(huì)居中冗茸，因?yàn)槟J(rèn)width是100%自適應(yīng)的，auto才有計(jì)算值可依匹中，而垂直方向夏漱，height沒(méi)有任何設(shè)置的時(shí)候高度絕不會(huì)自動(dòng)和父級(jí)高度一致，因此顶捷，auto沒(méi)有計(jì)算空間麻蹋，于是無(wú)法實(shí)現(xiàn)垂直居中。但是焊切，在writing-mode的世界里扮授，縱橫規(guī)則已經(jīng)改變，元素的行為表現(xiàn)發(fā)生了翻天覆地的變化专肪。
圖片元素
我們先來(lái)看下刹勃，圖片元素margin:auto實(shí)現(xiàn)垂直居中，您可以狠狠地點(diǎn)擊這里：CSS writing-mode與圖片margin:auto垂直居中demo
其中圖片：
img { display: block; margin-top: auto; margin-bottom: auto; }
FireFox瀏覽器下(P白省流量)：
但是嚎尤，在IE瀏覽器下荔仁，卻沒(méi)有垂直居中~~
納尼？芽死！難道IE不支持垂直流下的垂直居中乏梁？非也，根據(jù)鄙人的測(cè)試关贵，也就是圖片這類(lèi)替換元素貌似不行遇骑，普通的block元素都是可以的。
普通塊狀元素
您可以狠狠地點(diǎn)擊這里：CSS writing-mode與普通block元素margin:auto垂直居中demo
此時(shí)揖曾，不僅IE11 edge落萎，甚至IE8瀏覽器也都垂直居中了亥啦！
3. 可以使用text-align:center實(shí)現(xiàn)圖片垂直居中
前面提過(guò)，auto無(wú)法實(shí)現(xiàn)IE瀏覽器下的圖片垂直居中练链，如果我們非要讓圖片垂直居中翔脱，可以使用text-align:center，您可以狠狠地點(diǎn)擊這里：CSS writing-mode與圖片text-align:center垂直居中demo
結(jié)果媒鼓，之前病懨懨的IE瀏覽器活了：
由于我們直接使用內(nèi)聯(lián)特性進(jìn)行控制的届吁，因此，IE7瀏覽器也是可以實(shí)現(xiàn)text-align:center下的圖片垂直居中绿鸣，但是疚沐，根據(jù)我在IE11↘IE7下的測(cè)試，writing-mode需要寫(xiě)在最后重置下（原生估計(jì)不會(huì)這樣）枚驻，因此濒旦，完整的writing-mode代碼為：
.verticle-mode {
writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
*writing-mode: tb-rl;
}
4. 可以使用text-indent實(shí)現(xiàn)文字下沉效果
這是真實(shí)項(xiàng)目例子株旷，要增加一個(gè)按鈕按下文字下沉的效果再登。如果你來(lái)實(shí)現(xiàn)，你會(huì)這么實(shí)現(xiàn)呢晾剖？行高控制锉矢？但默認(rèn)文本就不居中（對(duì)于高度自適應(yīng)的按鈕，line-height下沉為了避免按鈕高度變化齿尽，默認(rèn)是不能完全居中的）沽损。padding+height精確控制，又略煩循头。然而绵估，在writing-mode垂直流下，我們又有了新思路卡骂，例如国裳，直接使用text-indent實(shí)現(xiàn)垂直方向的控制，沒(méi)想到吧全跨，無(wú)需關(guān)心height高度padding間距大小缝左，任何按鈕都可以通用，因?yàn)閠ext-indent不會(huì)影響元素原本的盒布局浓若。
您可以狠狠地點(diǎn)擊這里：CSS writing-mode與text-indent文字下沉效果demo
包括IE7在內(nèi)的瀏覽器都是支持的(同上最后要*writing-mode覆蓋下)都是支持下沉的渺杉。
為什么有如此的實(shí)現(xiàn)呢？這要?dú)w功于中文挪钓，在垂直流排版的時(shí)候是越，中文是不會(huì)旋轉(zhuǎn)的，還是直立的碌上，也就是說(shuō)英妓，雖然我們?nèi)庋劭瓷先ノ淖譀](méi)什么變化挽放，但是，布局流已經(jīng)發(fā)生了變化蔓纠，以前類(lèi)似text-indent/letter-spacing等水平控制屬性都作用在垂直方向了辑畦。
當(dāng)然，我們這個(gè)例子比較巧的是按鈕文字只有一個(gè)腿倚，要是按鈕文字有多個(gè)纯出，怕是就沒(méi)這么輕松和絕妙了。
5. 可以實(shí)現(xiàn)全兼容的icon fonts圖標(biāo)的旋轉(zhuǎn)效果
在老的IE瀏覽器下敷燎，我們要實(shí)現(xiàn)小圖標(biāo)的旋轉(zhuǎn)效果是不是很煩暂筝？要使用IE的旋轉(zhuǎn)或翻轉(zhuǎn)濾鏡(filter)什么的，具體可參見(jiàn)我之前的“CSS垂直翻轉(zhuǎn)/水平翻轉(zhuǎn)提高web頁(yè)面資源重用性”以及“IE矩陣濾鏡Matrix旋轉(zhuǎn)與縮放及結(jié)合transform的拓展”一文硬贯。
現(xiàn)在我們有了writing-mode焕襟，我們就不要這么煩心了。
前面可能也注意到了饭豹，當(dāng)writing-mode把文檔變成垂直流的時(shí)候鸵赖，我們的英文和數(shù)字符號(hào)是會(huì)“躺著”顯示，也就是天然90°旋轉(zhuǎn)了拄衰。此時(shí)它褪，我們不妨腦洞大開(kāi)一下，假如我們使用icon fonts技術(shù)讓這些字符直接映射某個(gè)小圖標(biāo)翘悉，那豈不是松松實(shí)現(xiàn)小圖標(biāo)旋轉(zhuǎn)了茫打，關(guān)鍵在于，就算是千年殺的IE6,IE7瀏覽器也是支持的啊妖混，這要比濾鏡什么的簡(jiǎn)單多了老赤！
眼見(jiàn)為實(shí)，您可以狠狠地點(diǎn)擊這里：writing-mode實(shí)現(xiàn)icon fonts圖標(biāo)旋轉(zhuǎn)效果demo
就算是IE7瀏覽器制市，也是很給力的抬旺！
6. 充分利用高度的高度自適應(yīng)布局
臥槽，不行了息堂，內(nèi)容太多了嚷狞，五一前也寫(xiě)不完了……
往下的7,8,9,10一起都略了吧~~
總之，放開(kāi)自己的大腦荣堰，理論上講床未，有了writing-mode，我們能夠做的事情比以前多了50%振坚，就怕你想不到薇搁，不怕做不到。
四渡八、writing-mode和direction的關(guān)系
上個(gè)月剛剛介紹了CSSdirection屬性啃洋，也是個(gè)好東西传货，具體參見(jiàn)“CSS direction屬性簡(jiǎn)介與實(shí)際應(yīng)用”，其可以改變文字的走向宏娄，那他和writing-mode是個(gè)什么關(guān)系呢问裕？
writing-mode,direction,unicode-bidi(MDN文檔)是CSS世界中3大可以改變文本布局流向的屬性。其中direction,unicode-bidi屬于近親孵坚，經(jīng)常在一起使用粮宛，也是唯一兩個(gè)不受CSS3 all屬性影響的CSS屬性，基本上就是和內(nèi)聯(lián)元素一起使用使用卖宠，且據(jù)說(shuō)貌似為阿拉伯文字設(shè)計(jì)巍杈。
乍一看，writing-mode似乎包含了direction,unicode-bidi某些功能和行為扛伍，例如vertical-rl的rl和direction的rtl值有相似之處筷畦，都是從右往左。然而刺洒，實(shí)際上鳖宾，兩者是沒(méi)有交集的。因?yàn)関ertical-rl此時(shí)的文檔流為垂直方向作媚，rl表示水平方向攘滩，此時(shí)再設(shè)置direction:rtl帅刊，實(shí)際上值rtl改變的是垂直方向的內(nèi)聯(lián)元素的文本方向纸泡，一橫一縱，沒(méi)有交集赖瞒。而且writing-mode可以對(duì)塊狀元素產(chǎn)生影響女揭，直接改變了CSS世界的縱橫規(guī)則，要比direction強(qiáng)大和鬼畜的多栏饮。且據(jù)說(shuō)貌似為東亞文字設(shè)計(jì)吧兔。
然而，CSS的奇妙就在于袍嬉，某些特性當(dāng)初可能就是問(wèn)了某些圖文排版設(shè)計(jì)境蔼，但是，我們可以利用其帶來(lái)的特性伺通，發(fā)揮自己的創(chuàng)造力箍土，實(shí)現(xiàn)其他很多意想不到的效果。所以罐监，上面出現(xiàn)的三劍客都是非常好的資源吴藻。
五、writing-mode和*-start屬性的流機(jī)制
CSS3中出現(xiàn)了諸多*-start/*-end屬性（亦稱(chēng)為CSS邏輯屬性）弓柱，例如：margin-start/margin-end,border-start/border-end,padding-start/padding-end, 以及text-align:start/text-align:end聲明沟堡。
下面問(wèn)題來(lái)了侧但，為什么會(huì)蹦出這么多*-start/*-end鬼？
那是因?yàn)楝F(xiàn)代瀏覽器加強(qiáng)了對(duì)流的支持航罗，包括老江湖direction禀横，以及最近年月跟進(jìn)的writing-mode。
在很久以前粥血，我們的認(rèn)知里燕侠，網(wǎng)頁(yè)布局就一種流向，就是從左往右立莉，從上往下绢彤，因此，我們使用margin-left/margin-right沒(méi)有任何問(wèn)題蜓耻。但是茫舶，如果我們流是可以變化的，例如刹淌，一張圖片距離左邊緣20像素饶氏，我們希望其文檔流是從右往左，同時(shí)距離右側(cè)是20像素有勾，怎么辦仆邓？
此時(shí)，margin-left:20px在圖片direction變化后询枚，就無(wú)效了腿箩；但是，margin-start就不會(huì)有此問(wèn)題雇逞，所謂start, 指的是文檔流開(kāi)始的方向荤懂，換句話(huà)說(shuō)，如果頁(yè)面是默認(rèn)的文檔流塘砸，則margin-start等同于margin-left节仿，如果是水平從右往左文檔流，則margin-start等同于margin-right掉蔬。margin-end也是類(lèi)似的廊宪。
webkit內(nèi)核的瀏覽器還支持*-before和*-end，默認(rèn)流下的margin-before近似于margin-top女轿，margin-after近似于margin-bottom箭启，然而，規(guī)范貌似沒(méi)提及谈喳，F(xiàn)ireFox也沒(méi)支持册烈，*-before和*-after出場(chǎng)的機(jī)會(huì)并不多，為什么呢？因?yàn)閷?shí)際上赏僧，配合writing-mode大猛，*-start/*-end已經(jīng)可以滿(mǎn)足我們對(duì)邏輯位置的需求了，水平和垂直都可以控制淀零，對(duì)立方向適用老的*-top/*-bottom.
例如挽绩，我們?cè)O(shè)置writing-mode值為vertical-rl，此時(shí)margin-start等同于margin-top驾中，如果此時(shí)margin-start唉堪，margin-top同時(shí)存在，會(huì)遵循權(quán)重和后來(lái)居上原則進(jìn)行相互的覆蓋肩民。
可以看到唠亚，場(chǎng)景不同，margin-start的作用也不能持痰，能上能下灶搜，能左能右簡(jiǎn)直在世百變星君。
關(guān)于*-start/*-end以后有機(jī)會(huì)會(huì)具體展開(kāi)論述工窍，這里就先點(diǎn)到為止割卖，大家估計(jì)目前也不會(huì)在實(shí)際項(xiàng)目中使用。
