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

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

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

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

對(duì)父元素，默認(rèn)設(shè)置writing-mode: horizotal-tb;，水平流。
測(cè)試圖：


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是對(duì)應(yīng)以父元素的width和height為基數(shù)計(jì)算的。

對(duì)父元素設(shè)置writing-mode:vertical-lr;，垂直流。
測(cè)試圖：


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

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


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

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


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

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

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

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

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

CSS basic box model

CSS Writing Modes Level 3

Visual formatting model

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