【CSS深入】不同塊級流方向時的百分比計算
百分比在屏幕自適應是我們常用，但是很多時候某個CSS屬性的百分比計算值，并非如我們所想象的那樣子。前段時間有位同學分享了一篇 關于margin/padding自適應布局 的文章，看完后我去w3.org查了下 margin 和 padding 百分比計算的注意事項，描述如下：
Note that in a horizontal flow , percentages on ‘margin-top’ and ‘margin-bottom’ are relative to the width of the containing block, not the height (and in vertical flow , ‘margin-left’ and ‘margin-right’ are relative to the height, not the width). [1 ]
Note that percentages on ‘padding-top’ and ‘padding-bottom’ are relative to the width of the containing block, not the height (at least in a horizontal flow ; in a vertical flow they are relative to the height). [2 ]
水平流？垂直流？那是甚么鬼？之前我一直不明白這兩者何意，直到最近看CSS權威指南，講到 direction 的時候提到了 CSS Writing Modes Level 3 里的 writing-mode ，查了官方文檔后才知道，CSS3以后就有了定義內容書寫方向的規范。
什么是塊級流方向
簡言之，塊級流方向就是塊級盒子在塊級格式化上下文中以何種方向來進行順序排列。這里要注意的一點是對于英文（也是簡體中文）這種從上至下從左至右書寫的語言， writing-mode 和 direction 分別會被默認設為 horizontal-tb 和 ltr 。另外在CSS權威指南P171有提到，我們常見的 margin 的初始值是0，但是我們看到的大都是靠在左上方的，因為在英文語言的書寫順序、也就是塊級流方向下， margin-right 和 margin-bottom 被默認強制設為auto了。如果不明白這些默認的強制格式化屬性規范，很多時候我們做出來頁面的效果可能會有點不合本意。這時我才漸漸意識到文本語言碼識別 lang 和字符碼識別 charset 在多語言情境下的重要性，另外關于FBC的內容還我也還未深入了解（這里挖個坑，以后填），請參看參考目錄部分。
如何設置塊級流方向
direction 屬性只是影響的行內類型內容的書寫方向，而 writing-mode 則是可以直接影響塊級元素的布局。 horizontal-tb 是我們常用頁面的默認設定，決定了內容的水平方向書寫和塊級流方向的從上往下推進； vertical-rl 和 vertical-lr 則是部分語言的書寫方向，這兩個屬性值決定了內容的垂直方向書寫以及塊級流方向分別是從右往左推進和從左往右的推進，比如，古漢字應用中最常見的是圣旨是從右向左推進、從上往下書寫的，現代的日語也有這種格式的。