閱讀(36.2k) 書(shū)簽贊(0) 我要糾錯(cuò)

margin系列之百分比

2018-02-24 15:22 更新

margin系列之百分比

原作者：doyoe
原文鏈接：http://blog.doyoe.com/2013/11/30/css/margin%E7%B3%BB%E5%88%97%E4%B9%8B%E7%99%BE%E5%88%86%E6%AF%94/

你可能從沒(méi)注意過(guò)它

在 margin系列之keyword auto 中，說(shuō)過(guò)了 margin 值為 auto 的情況，這次要聊的是值為百分比的情形。

我必須承認(rèn)這是一個(gè)非?；A(chǔ)的知識(shí)點(diǎn)，但有一段時(shí)間我發(fā)現(xiàn)很多人對(duì)此有錯(cuò)誤的認(rèn)知。偶爾在面試或者分享的時(shí)候，我會(huì)問(wèn)到這個(gè)問(wèn)題，有人會(huì)脫口而出的告訴我他對(duì)此的感性理解。

或許現(xiàn)在大多數(shù)人對(duì)此不屑一顧，但我仍想說(shuō)一說(shuō)，這樣以后就可以不再問(wèn)類(lèi)似的問(wèn)題了。

假設(shè)有這樣一個(gè)場(chǎng)景

仍然以一個(gè)問(wèn)題來(lái)開(kāi)始，這是我之前在微博發(fā)過(guò)的，原文是這樣的：

假設(shè)一個(gè)塊級(jí)包含容器，寬1000px，高600px，塊級(jí)子元素定義 margin:10% 5%; 大家說(shuō)說(shuō) margin 的 top, right, bottom, left 計(jì)算值最終是多少？

我記得得到不少 100px 30px 100px 30px 的反饋，我們來(lái)還原代碼：

CSS:

#demo{
    width: 1000px;
    height: 600px;
}
#demo p{
    margin: 10% 5%;
}

HTML:

<div id="demo">
    <p>恩，注意看我所在的位置。</p>
</div>

事實(shí)告訴我們結(jié)果是 100px 50px 100px 50px，不論結(jié)果是否符合你的預(yù)期，我們先來(lái)看demo驗(yàn)證一下：margin百分比結(jié)果猜想，當(dāng)然，你也根據(jù)上面還原的代碼自己創(chuàng)建一個(gè)例子。

為什么會(huì)這樣？

詫異嗎？不用懷疑瀏覽器出了問(wèn)題，因?yàn)檫@是正確的實(shí)現(xiàn)。

規(guī)范中注明 margin 的百分比值參照其包含塊的寬度進(jìn)行計(jì)算。

當(dāng)然，它不會(huì)這么簡(jiǎn)單，和上篇文章 keyword auto 一樣，這只發(fā)生在默認(rèn)的 writing-mode: horizontal-tb; 和 direction: ltr; 的情況下。

當(dāng)書(shū)寫(xiě)模式變成縱向的時(shí)候，其參照將會(huì)變成包含塊的高度。我們改變一下上面例子中的CSS書(shū)寫(xiě)模式：

CSS:

#demo{
    -webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
    writing-mode: tb-rl; /* for ie */
}

在 #demo 中添加這2句，其它c(diǎn)ode不變。也有個(gè)例子供觀：書(shū)寫(xiě)模式影響margin百分比的參照對(duì)象。

恩，這回的結(jié)果是 60px 30px 60px 30px ，因?yàn)槠鋮⒄諏?duì)象變成了包含塊的高度。

順帶再說(shuō)說(shuō)

你是否覺(jué)得這不符合常規(guī)的感性認(rèn)知？感性認(rèn)知更多感覺(jué)應(yīng)該橫向參照包含塊寬度，縱向參照包含塊高度。

其實(shí)這是為了要橫向和縱向2個(gè)方向都創(chuàng)建相同的margin，如果它們的參照物不一致，那就無(wú)法得到兩個(gè)方向相同的留白。

你可能會(huì)問(wèn)那為什么要選擇寬度做參照而不是高度呢？

這其實(shí)更多的要從CSS設(shè)計(jì)意圖上去想，因?yàn)镃SS的基礎(chǔ)需求是排版，而通常我們所見(jiàn)的橫排文字，其水平寬度一定（仔細(xì)回想一下，如果沒(méi)有顯式的定義寬度或者強(qiáng)制一行顯示，都會(huì)遇到邊界換行，而不是水平延展），垂直方向可以無(wú)限延展。但當(dāng)書(shū)寫(xiě)模式為縱向時(shí)，其參照就變成了高度而不再是寬度了。

還記得我們?cè)?margin系列之keyword auto 留了個(gè)問(wèn)題：為什么 margin: auto; 無(wú)法再縱向上垂直居中？其實(shí)原因也是上面所說(shuō)的，因?yàn)榭v向是可以無(wú)限延展的，所以沒(méi)有一個(gè)一定的值可以被參照被用來(lái)計(jì)算。