我們以乙個問題開始：
假設乙個塊級包含容器，寬1000px，高600px，塊級子元素定義 margin:10% 5%; 大家說說 margin 的 top, right, bottom, left 計算值最終是多少？
我記得得到不少 100px 30px 100px 30px 的反饋，我們來還原**：
css：
#demo
#demo p
html：
恩，注意看我所在的位置。
事實告訴我們結果是 100px 50px 100px 50px，不論結果是否符合你的預期，我們先來看demo驗證一下：margin百分比結果猜想，當然，你也根據上面還原的**自己建立乙個例子。
為什麼會這樣？
詫異嗎？不用懷疑瀏覽器出了問題，因為這是正確的實現。
規範中註明margin 的百分比值參照其包含塊的寬度進行計算。
當然，它不會這麼簡單，這只發生在預設的writing-mode: horizontal-tb;和direction: ltr;的情況下。
當書寫模式變成縱向的時候，其參照將會變成包含塊的高度。我們改變一下上面例子中的css書寫模式：
css：
#demo
在 #demo 中新增這2句，其它code不變。也有個例子供觀：書寫模式影響margin百分比的參照物件。
恩，這回的結果是60px 30px 60px 30px，因為其參照物件變成了包含塊的高度。
順帶再說說
你是否覺得這不符合常規的感性認知？感性認知更多感覺應該橫向參照包含塊寬度，縱向參照包含塊高度。
其實這是為了要橫向和縱向2個方向都建立相同的margin，如果它們的參照物不一致，那就無法得到兩個方向相同的留白。
你可能會問那為什麼要選擇寬度做參照而不是高度呢？
這其實更多的要從css設計意圖上去想，因為css的基礎需求是排版，而通常我們所見的橫排文字，其水平寬度一定（仔細回想一下，如果沒有顯式的定義寬度或者強制一行顯示，都會遇到邊界換行，而不是水平延展），垂直方向可以無限延展。但當書寫模式為縱向時，其參照就變成了高度而不再是寬度了。
為什麼margin: auto;無法再縱向上垂直居中？其實原因也是上面所說的，因為縱向是可以無限延展的，所以沒有乙個一定的值可以被參照被用來計算。
margin之百分比（二）
在 margin系列之keyword auto 中，說過了margin值為auto的情況，這次要聊的是值為百分比的情形。我必須承認這是乙個非常基礎的知識點，但有一段時間我發現很多人對此有錯誤的認知。偶爾在面試或者分享的時候，我會問到這個問題，有人會脫口而出的告訴我他對此的感性理解。或許現在大多數人對...
css百分比定位和百分比尺寸
只有設定了定位的 relative,absolute,fixed 的元素才有left,top等屬性。子元素relative定位 百分比定位和百分比尺寸都是相對于父元素，無論父元素有沒有定位 子元素absolute定位 百分比定位和百分比尺寸都是相對於最近的定位了的祖先元素，如果沒有則相對於視窗。可以...
CSS筆記 margin（塌陷 百分比 定位）
note margin的top和bottom屬性對非替換內聯元素無效，例如和。一 margin塌陷 collapsing 定義 塊級元素的上外邊距和下外邊距有時會合併 或摺疊 為乙個外邊距，如果都為負，取最小值 如果都為正，取最大值 如果一正一負，取和。注意 浮動元素 和 絕對定位 元素的外邊距不會...