我真不懂margin

 　　平時不少問題，大可能是知其然不知其因此然形成的。因此，明白了原理，在遇到問題就有了分析的思路。因此，我但願你們在遇到非標準的問題的時候，也就所謂的某些bug的時候，
多去探查一下，爲何會產生這種問題。解決的原理是什麼，別解決了就算完了。如今的省事，會給你未來的成長埋下隱患。

　　而每每所謂的bug，是對規範，原理的理解不透徹形成的。
　　因此多問個爲何，雖尺有所短，但假以時日，必寸有所長。

 

本文主要涉及如下知識點點：

• 垂直外邊距合併
• 何時用maigin，何時用padding
• 行內替換元素和費替換元素
• margin的基線
• 盒子的物理大小，顯示大小，邏輯大小
• 浮動觸發haslayout

瞭解了這些，就能夠說margin我是懂點了。距離真正懂還差得遠。下面是針對本身狀況的一些筆記和總結。

具體詳細的文檔可參考  圓心、海玉的文章和w3c上的規範。　

http://www.planabc.net/2007/03/18/css_attribute_margin/　   圓心

http://www.hicss.net/do-not-tell-me-you-understand-margin/   海玉

http://www.w3cplus.com/css/the-definitive-guide-to-using-negative-margins.html  大漠老師網站

 

感謝前輩們的心血。

 

 

---

 

1. margin下面，父元素的背景能夠看到。能夠說margin的地方是透明的
   
2. 當一個元素位於另外一個元素中，且這個父元素沒有東西來和子元素隔開（父元素有border或者padding均可以隔開子元素），那父元素與子元素的上/下外邊距也會合並。
   

    

   
   
3. 只有普通文檔流中塊框的垂直外邊距纔會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合並。
   外邊距合併只發生在垂直方向上，水平方向上是不會發生外邊距合併的。
4. 
   實際工做中，垂直外邊距合併問題常見於第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，並且只在標準瀏覽器下(FirfFox、Chrome、Opera、Sarfi)產生問題，IE下反而表現良好。
   像水同樣，接觸後融合。但大小是以前大的那個。
5. 根據規範，一個盒子若是沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。
   注意，脫離文檔流後不受影響。

　　再說了白點就是：父元素的第一個子元素的上邊距margin-top若是碰不到有效的border或者padding.就會不斷一層一層的找本身「領導」(父元素，祖先元素)的麻煩，把本身的margin當領導的margin執行

 　　其中有類特殊的元素：如img|input|select|textarea|button|label等，他們被稱爲可置換元素（Replaced element）

1. 
   他們區別通常inline元素（相對而言，稱non-replaced element）是：這些元素擁有內在尺寸(intrinsic dimensions),他們能夠設置width/height屬性。他們的性質同設置了display:inline-block的元素一致。
   margin也能用於內聯元素，這是規範所容許的，可是margin-top和margin-bottom對內聯元素（對行）的高度沒有影響，而且因爲邊界效果(margin效果)是透明的，他也沒有任何的視覺影響。
2. 給行內非替換元素設置上下margin是沒用的。並且行內元素不會發生外邊距合併。外邊距合併只在垂直方向上。
   注意&nbsp也會佔個位置
   行內替換元素，能夠設置寬高，margin上下也會有效果。且不會在水平方向上有外邊距合併，仍是那句話，外邊距合併只在垂直方向上。
3. margin 屬性能夠應用於幾乎全部的元素，除了表格顯示類型（不包括 table-caption, table and inline-table）的元素，並且垂直外邊距對非置換內聯元素（non-replaced inline element）不起做用。
   置換元素（replaced element）主要是指 img, input, textarea, select, object 等這類默認就有 CSS 格式化外表範圍的元素。
4. 何謂參考線？參考線就是 margin 移動的基準點，此基準點相對於 box 是靜止的。而 margin 的數值，就是 box 相對於參考線的位移量。

 

從上咱們能夠看到 top 和 left 都是之外元素爲參考，而 right 和 bottom 以本元素爲參考。上面的位移方向是指 margin 數值爲正值時候的情形，若是是負值則位移方向相反。
box 的實際大小 = box 的物理大小 + 正的 margin

這僅對元素自己有效，對於其後面的相關元素，他們則只以 margin 的邏輯大小爲準則，進行佈局。

 

結論：

box 最後的顯示大小等於 box 的 border 及 border 內的大小加上正的 margin 值。而負的 margin 值不會影響 box 的實際大小，若是是負的 top 或 left 值會引發 box 的向上或向左位置移動，若是是 負的bottom 或 right 只會影響下面 box 的顯示的參考線。

　　實際的邏輯大小，是按照邊邊來算的。

1. 基線，邏輯大小，物理大小，顯示大小。
   基線是margin的關鍵。邏輯大小改變後，下一個block基線位置就變了，最後的定位仍是看基線位置。尤爲是上面和左面。
2. 行內元素，設置了浮動，就能夠設置寬高了
   float:left等浮動屬性可讓inline元素haslayout，會讓inline元素表現得跟inline-block元素的特性同樣，支持高寬，垂直margin和padding等

IE6/7/8下auto margin居中bug： 

發生場合：給block元素設置margin auto沒法居中 解決方法：出現這種bug的緣由一般是沒有Doctype，而後觸發了ie的quirks mode，加上Doctype聲明就能夠了。在《戰勝IE的葵花寶典》裏給出的方法是給block元素添加一個width可以解決，但根據本人親測，加with此種方法是無效的，若是沒有Doctype即便給元素添加width也沒法讓block元素居中。

 原理分析：缺乏Doctype聲明。

IE8下input[button | submit] 設置margin:auto沒法居中
發生場合：ie8下，若是給像button這樣的標籤（如button input[type="button"] input[type="submit"]）設置{ display: block; margin:0 auto; }若是不設置寬度的話沒法居中。
解決方法：能夠給爲input加上寬度
原理分析：IE8瀏覽器Bug。

IE8百分比padding垂直margin bug：
發生場合：當父元素設置了百分比的padding，子元素有垂直的margin的時候，就好像父元素被設置了margin同樣。
解決方法：給父元素加一個overflow:hidden/auto。
原理分析：IE8瀏覽器Bug。