摘要：簡言之，塊級流方向包含兩種一種是水平流，一種是垂直流。對百分比計算的影響首先，先明確這里要討論的是塊級元素的水平流和垂直流對的百分比屬性值的計算值的影響。

百分比在屏幕自適應是我們常用，但是很多時候某個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則是部分語言的書寫方向，這兩個屬性值決定了內容的垂直方向書寫以及塊級流方向分別是從右往左推進和從左往右的推進，比如，古漢字應用中最常見的是圣旨是從右向左推進、從上往下書寫的，現代的日語也有這種格式的。

首先，先明確這里要討論的是塊級元素的水平流和垂直流對margin、padding、width、height的百分比屬性值的計算值的影響。
然后，準備好測試代碼（可以去我的github下找到ver_hor_flow.html和ver_hor_flow.css）：

test contet
    
test content

#outer {
    background-color: fuchsia;
    height: 300px;
    width: 500px;
}
#inner {
    background-color: lime;
    margin: 1% 8% 2% 5%;
    padding: 1% 8% 2% 5%;
    height: 10%;
    width: 50%;
}

這里，我們對內部的子元素直接設置了寬高以便于，觀察父元素容器的水平流和垂直流對子元素寬高的影響。但是如果不設置寬高，則子元素的寬高默認會是內容寬高，而內容高（垂直流中變成橫向的了，以width衡量）由行高決定，而行高則在字體大小的基礎上乘以一個瀏覽器默認的縮放因子來得到，字體大小也是有一個瀏覽器默認的計算值。比如我的瀏覽器默認是font-size:16px;以及line-height:21px;，這個21px是字體大小與一個縮放因子相乘后的結果，內容高度就是它了。Anyway，下面繼續。

對父元素，默認設置writing-mode: horizotal-tb;，水平流。
測試圖：


margin-top和padding-top:500px乘以1%=5px
margin-right和padding-right:500px乘以8%=40px
margin-bottom和padding-bottom:500px乘以2%=10px
margin-left和padding-left:500px乘以5%=25px
width:500px乘以50%=250px
height:300px乘以10%=30px
小結：可以看出，子元素margin和padding是以父元素的width為基數計算的，而子元素的width和height是對應以父元素的width和height為基數計算的。

對父元素設置writing-mode:vertical-lr;，垂直流。
測試圖：


margin-top和padding-top:300px乘以1%=3px
margin-right和padding-right:300px乘以8%=24px
margin-bottom和padding-bottom:300px乘以2%=6px，這里margin-bottom的258px是因為我們設置了height:10%;，由于margin只是設置的最小值，一旦不足他會自動補上剩余的部分（300px-3px-3px-30px-6px=258px）。如果沒設置height就會“正常”了。（這里要考慮到“過度受限”規則影響，也就是一個盒子的計算值相互矛盾的情況下，進行的一種“優先級”權衡。這里的自動補充計算值其實是因為對于水平流、從上往下推進的語言，實際上的margin-bottom會被強制設為auto，至于為何margin-right又正常呢？嗯，我也還在深入了解這個影響計算規則的“過度受限overconstrained”。）
margin-left和padding-left:300px乘以5%=15px
width:500px乘以50%=250px
height:300px乘以10%=30px
小結：設置垂直流以后，margin和padding的百分比計算基數變成了父元素的高度（height:300px;），而子元素的width和height的百分比計算仍然是對應以父元素的width和height為基數計算的。
這里只測試了垂直流中從右向左推進時，各屬性值的計算，另一種從左向右推進的各屬性值計算結果是一樣的，在此不贅述。

上面都是對作為容器的父元素進行塊級流方向設置，如果只是對于子元素設置呢？
對內部的子元素設置writing-mode: vertical-lr;父元素不做其他設置，即默認。


小結：子元素的寬高和外邊距、內邊距都沒有改變，也就是說子元素改變的塊級流方向不影響本身margin、padding、width、height的計算值。

2D變形中有個rotate()函數可以扭轉一個元素的擺放方向，那這個函數的設置會不會對子元素本身的margin、padding、width、height計算值造成影響呢？
設置transform:rotate(-90deg);


小結：變形只是改變了子元素的表現形式，但是并未改變子元素的百分比計算值。
--------------------------------------割----------------------------------
兩天后，回過頭看了下，這部分還要加個父元素的測試才算完整。不過結果是一樣的：各屬性的百分比數值計算并不受影響。我的Github上的測試代碼，會同步更新。

查看邊框的官方標準可知，邊框不能設置百分比屬性值，但是有相對屬性值em、ex等，它們的計算都是以當前字體大小為基數。

這個屬性只會影響到設置width和height后，內容區的大小，它對于外邊距和內邊距的計算不影響。

在常用的盒模型百分比計算中，子元素的width和height始終跟隨父元素對應的寬高計算；而子元素的margin和padding則要考慮當前文檔的塊級流方向是水平流還是垂直流，如果是水平流，則以父元素的width為基數計算百分比，如果是垂直流則以父元素的height為基數計算百分比。單個子元素改變塊級流方向以及設置變形都不改變父元素下子元素的塊級流方向，不影響百分比計算。邊框不可設置百分比。

《CSS權威指南（第三版）》

CSS basic box model

CSS Writing Modes Level 3

Visual formatting model

詳說 Block Formatting Contexts (塊級格式化上下文) | Kayo"s Melody