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

百分比在屏幕自適應(yīng)是我們常用，但是很多時(shí)候某個(gè)CSS屬性的百分比計(jì)算值，并非如我們所想象的那樣子。前段時(shí)間有位同學(xué)分享了一篇關(guān)于margin/padding自適應(yīng)布局的文章，看完后我去w3.org查了下margin和padding百分比計(jì)算的注意事項(xiàng)，描述如下：

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權(quán)威指南，講到direction的時(shí)候提到了CSS Writing Modes Level 3里的writing-mode，查了官方文檔后才知道，CSS3以后就有了定義內(nèi)容書寫方向的規(guī)范。

塊級流方向就是塊級盒子在塊級格式化上下文中以何種方向來進(jìn)行順序排列。這里要注意的一點(diǎn)是對于英文（也是簡體中文）這種從上至下從左至右書寫的語言，writing-mode和direction分別會被默認(rèn)設(shè)為horizontal-tb和ltr。簡言之，塊級流方向包含兩種：一種是水平流，一種是垂直流。另外在CSS權(quán)威指南P171有提到，我們常見的margin的初始值是0，但是我們看到的大都是靠在左上方的，因?yàn)樵谟⑽恼Z言的書寫順序、也就是塊級流方向下，margin-right和margin-bottom被默認(rèn)強(qiáng)制設(shè)為auto了。如果不明白這些默認(rèn)的強(qiáng)制格式化屬性規(guī)范，很多時(shí)候我們做出來頁面的效果可能會有點(diǎn)不合本意。這時(shí)我才漸漸意識到文本語言碼識別lang和字符碼識別charset在多語言情境下的重要性，另外關(guān)于FBC的內(nèi)容還我也還未深入了解（這里挖個(gè)坑，以后填），請參看參考目錄部分。

direction屬性只是影響的行內(nèi)類型內(nèi)容的書寫方向，而writing-mode則是可以直接影響塊級元素的布局。horizontal-tb是我們常用頁面的默認(rèn)設(shè)定，決定了內(nèi)容的水平方向書寫和塊級流方向的從上往下推進(jìn)；vertical-rl和vertical-lr則是部分語言的書寫方向，這兩個(gè)屬性值決定了內(nèi)容的垂直方向書寫以及塊級流方向分別是從右往左推進(jìn)和從左往右的推進(jìn)，比如，古漢字應(yīng)用中最常見的是圣旨是從右向左推進(jìn)、從上往下書寫的，現(xiàn)代的日語也有這種格式的。

首先，先明確這里要討論的是塊級元素的水平流和垂直流對margin、padding、width、height的百分比屬性值的計(jì)算值的影響。
然后，準(zhǔn)備好測試代碼（可以去我的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%;
}

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

對父元素，默認(rèn)設(shè)置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
小結(jié)：可以看出，子元素margin和padding是以父元素的width為基數(shù)計(jì)算的，而子元素的width和height是對應(yīng)以父元素的width和height為基數(shù)計(jì)算的。

對父元素設(shè)置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是因?yàn)槲覀冊O(shè)置了height:10%;，由于margin只是設(shè)置的最小值，一旦不足他會自動補(bǔ)上剩余的部分（300px-3px-3px-30px-6px=258px）。如果沒設(shè)置height就會“正?！绷?。（這里要考慮到“過度受限”規(guī)則影響，也就是一個(gè)盒子的計(jì)算值相互矛盾的情況下，進(jìn)行的一種“優(yōu)先級”權(quán)衡。這里的自動補(bǔ)充計(jì)算值其實(shí)是因?yàn)閷τ谒搅?、從上往下推進(jìn)的語言，實(shí)際上的margin-bottom會被強(qiáng)制設(shè)為auto，至于為何margin-right又正常呢？嗯，我也還在深入了解這個(gè)影響計(jì)算規(guī)則的“過度受限overconstrained”。）
margin-left和padding-left:300px乘以5%=15px
width:500px乘以50%=250px
height:300px乘以10%=30px
小結(jié)：設(shè)置垂直流以后，margin和padding的百分比計(jì)算基數(shù)變成了父元素的高度（height:300px;），而子元素的width和height的百分比計(jì)算仍然是對應(yīng)以父元素的width和height為基數(shù)計(jì)算的。
這里只測試了垂直流中從右向左推進(jìn)時(shí)，各屬性值的計(jì)算，另一種從左向右推進(jìn)的各屬性值計(jì)算結(jié)果是一樣的，在此不贅述。

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


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

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


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

查看邊框的官方標(biāo)準(zhǔn)可知，邊框不能設(shè)置百分比屬性值，但是有相對屬性值em、ex等，它們的計(jì)算都是以當(dāng)前字體大小為基數(shù)。

這個(gè)屬性只會影響到設(shè)置width和height后，內(nèi)容區(qū)的大小，它對于外邊距和內(nèi)邊距的計(jì)算不影響。

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

《CSS權(quán)威指南（第三版）》

CSS basic box model

CSS Writing Modes Level 3

Visual formatting model

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