margin系列之百分比
原文地址:margin系列之百分比 by @doyoe
你可能從沒注意過它
在 margin系列之keyword auto 中,說過了 margin
值為 auto
的情況,這次要聊的是值為百分比的情形。
我必須承認這是一個非常基礎的知識點,但有一段時間我發現很多人對此有錯誤的認知。偶爾在面試或者分享的時候,我會問到這個問題,有人會脫口而出的告訴我他對此的感性理解。
或許現在大多數人對此不屑一顧,但我仍想說一說,這樣以後就可以不再問類似的問題了。
假設有這樣一個場景
仍然以一個問題來開始,這是我之前在 微博 發過的,原文是這樣的:
假設一個塊級包含容器,寬1000px,高600px,塊級子元素定義 margin:10% 5%;
大家說說 margin
的 top, right, bottom, left
計算值最終是多少?
我記得得到不少 100px 30px 100px 30px
的反饋,我們來還原始碼:
CSS:
#demo{
width: 1000px;
height: 600px;
}
#demo p{
margin: 10% 5%;
}
HTML:
<div id="demo">
<p>恩,注意看我所在的位置。</p>
</div>
事實告訴我們結果是 100px 50px 100px 50px
,不論結果是否符合你的預期,我們先來看demo驗證一下:margin百分比結果猜想,當然,你也根據上面還原的程式碼自己建立一個例子。
為什麼會這樣?
詫異嗎?不用懷疑瀏覽器出了問題,因為這是正確的實現。
規範中註明 margin
的百分比值參照其包含塊的寬度進行計算。
當然,它不會這麼簡單,和上篇文章 keyword auto 一樣,這隻發生在預設的 writing-mode: horizontal-tb;
和 direction: ltr;
的情況下。
當書寫模式變成縱向的時候,其參照將會變成包含塊的高度。我們改變一下上面例子中的CSS書寫模式:
CSS:
#demo{
-webkit-writing-mode: vertical-rl; /* for browsers of webkit engine */
writing-mode: tb-rl; /* for ie */
}
在 #demo 中新增這2句,其它code不變。也有個例子供觀:書寫模式影響margin百分比的參照物件。
恩,這回的結果是 60px 30px 60px 30px
,因為其參照物件變成了包含塊的高度。
順帶再說說
你是否覺得這不符合常規的感性認知?感性認知更多感覺應該橫向參照包含塊寬度,縱向參照包含塊高度。
其實這是為了要橫向和縱向2個方向都建立相同的margin,如果它們的參照物不一致,那就無法得到兩個方向相同的留白。
你可能會問那為什麼要選擇寬度做參照而不是高度呢?
這其實更多的要從CSS設計意圖上去想,因為CSS的基礎需求是排版,而通常我們所見的橫排文字,其水平寬度一定(仔細回想一下,如果沒有顯式的定義寬度或者強制一行顯示,都會遇到邊界換行,而不是水平延展),垂直方向可以無限延展。但當書寫模式為縱向時,其參照就變成了高度而不再是寬度了。
還記得我們在 margin系列之keyword auto 留了個問題:為什麼 margin: auto;
無法再縱向上垂直居中?其實原因也是上面所說的,因為縱向是可以無限延展的,所以沒有一個一定的值可以被參照被用來計算。
受書寫模式影響的其它特性:
- margin摺疊
- margin的keyword auto value
- padding的百分比值
可參考:
- http://dev.w3.org/csswg/css-box/#the-margin-properties
- http://dev.w3.org/csswg/css-box/#ltpercentagegt
- http://dev.w3.org/csswg/css-box/#Calculating
margin系列文章:
相關文章
- margin系列之bug巡演
- margin系列之佈局篇
- margin系列之bug巡演(二)
- margin系列之bug巡演(三)
- margin系列之keyword auto
- margin系列之內秀篇
- margin系列之內秀篇(二)
- margin 百分比 參考物件物件
- margin/padding百分比值的計算padding
- margin系列之與相對偏移的異同
- margin尺寸百分比時的參考物件是誰物件
- margin系列之外邊距摺疊
- 區別margin、padding、width、height值為百分比padding
- Margin 的特異之處
- 移動端巧用margin/padding的百分比實現自適應padding
- css之margin && padding講解CSSpadding
- 解決margin塌陷和margin合併
- 【學習筆記】CSS深入理解之margin筆記CSS
- css marginCSS
- margin 塌陷
- CSS字型大小之em,px,百分比CSS
- margin小結
- 深入理解margin
- 負margin小記
- 【正視CSS】他山之玉可以裝B之細說marginCSS
- IE CSS Bug系列:IE8中按鈕使用Auto-Margin居中失效CSS
- 函式間隔(functional margin)和幾何間隔(geometric margin)函式Function
- CSS(margin)問題巢狀div中margin-top轉移CSS巢狀
- display: block; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px;BloCWebKit
- 深度剖析Margin塌陷,BFC,Containing Block之間的關係AIBloC
- CSS margin外邊距CSS
- CSS margin 外邊距CSS
- margin-top的坑
- margin的知識點
- margin:0 auto;不居中
- Hangcheck: hangcheck value past margin!GCAST
- IE6下的margin與_margin,會導致樣式錯位
- CSS margin負外邊距CSS