css - margin 取值 auto 百分比，外邊距摺疊。

自 http://blog.doyoe.com/archives/ 

 

Margin 的auto取值

margin 是複合屬性也就是說 margin: auto; 其實至關於 margin: auto auto auto auto; margin: 0 auto;至關於 margin: 0 auto 0 auto;，四個值分別對應上右下左。

margin 的 上下左右方向還與 writing-mode 和文檔流方向direction 有關

http://www.zhangxinxu.com/wordpress/2016/04/css-writing-mode/（講的很清楚還有實際用的例子。）

默認 writing-mode: horizontal-tb;  direction: ltr;

爲何auto能實現水平居中

水平方向的auto，其計算值取值於可用空間（剩餘空間）

例如：一個寬100px的p被包含在一個寬500px的div內，此時設置 p 的 margin-left 值爲 auto，結果獲得了，p相對於包含塊右對齊了，這與規範描述一致。margin-left:auto; 自動佔據了包含塊的可用空間，即 500 - 100px = 400px。也就是說auto最後的計算值爲400px，即 margin-left:400px;。因此 margin-right:auto; 的結果會至關於左對齊。

由於左右方向的auto值均分了可用空間，使得塊元素得以在包含塊內居中顯示。

 

margin 取值百分比

場景：假設一個塊級包含容器，寬1000px，高600px，塊級子元素定義 margin:10% 5%; 你們說說 margin 的 top, right, bottom, left 計算值最終是多少？

事實告訴咱們結果是 100px 50px 100px 50px。

規範中註明 margin 的百分比值參照其包含塊的寬度進行計算。

和上篇文章 keyword auto 同樣，這隻發生在默認的 writing-mode: horizontal-tb; 和 direction: ltr;

當書寫模式變成縱向的時候，其參照將會變成包含塊的高度。

CSS這樣設置的目的：

其實這是爲了要橫向和縱向2個方向都建立相同的margin，若是它們的參照物不一致，那就沒法獲得兩個方向相同的留白。

（margin摺疊也受書寫模式影響）

 

margin 與相對偏移（position：relative） 的異同

margin-top 仍是 relative top 都是以自身做爲參照物進行偏移的。

margin-top 影響文檔流排版， relative改變的只有自身。

（

absolute 偏移相對的是包含塊，而且其偏移值是從包含塊的 padding 區域開始計算。以前一直覺得是內容區域開始的！！！百分比也是按照padding加內容區的值爲百分之百。

）

絕對定位讓不設置寬度的塊元素表現的像行內塊元素。除非你設置了定位的四個方向。

可能不設置，會給他們賦值爲儘量的大。

當position爲relative時，若是top和bottom都是auto，則它們的計算值是0，right和left亦然；若是top和bottom其中一個爲auto，則auto至關於另外一個的負值，即top = -bottom，right和left亦然；若是top和bottom的值都不爲auto，則忽略bottom，若是right和left的值都不爲auto，則忽略right。

若是同時設置top bottom left right， 取top，left的值。

 

margin 外邊距摺疊

外邊距用來指定非浮動元素與其周圍盒子邊緣的最小距離。兩個或兩個以上的相鄰的垂直外邊距會被摺疊並使用它們之間最大的那個外邊距值。多數狀況下，摺疊垂直外邊距能夠在視覺上顯得更美觀，也更貼近設計師的預期。

發生摺疊須要是相鄰的費浮動元素

摺疊發生在垂直外邊距上，即margin-top/margin-bottom;(受writing-mode影響)

摺疊後取其中最大的那個margin值做爲最終值

爲何有margin摺疊這樣的設計

 margin 摺疊是爲實現文本排版的段落間距而提供的特性。

浮動元素不會發生margin摺疊

發生 margin 摺疊的元素不必定是兄弟關係，也能是父子或祖先的關係。