簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
實際工作中，垂直外邊距合併問題常見於第乙個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下(firffox、chrome、opera、sarfi)產生問題，ie下反而表現良好
如果按照css規範，ie的「良好表現」其實是乙個錯誤的表現，因為ie的haslayout渲染導致了這個「表現良好」的外觀。而其他標準瀏覽器則會表現出「有問題」的外觀。這個問題發生的原因是根據規範，乙個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊。
再說了白點就是：父元素的第乙個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己「領導」(父元素，祖先元素)的麻煩。只要給領導設定個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳聖旨，把自己的margin當領導的margin執行。
對於垂直外邊距合併的解決方案上面已經解釋了，為父元素例子中的middle元素增加乙個border-top或者padding-top即可解決這個問題。
個人認為：margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於布局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段「呼吸距離」。
二者表現的主要差別在於，在頁面文件中block元素另起一行開始，並獨佔一行。inline元素則同其他inline元素共處一行。
1. ie6中雙邊距bug：
發生場合：當給父元素內第乙個浮動元素設定margin-left（元素float:left）或margin-right（元素float:right）時margin加倍。
解決方法：是給浮動元素加上display:inline;css屬性；或者用padding-left代替margin-left。
原理分析：塊級物件預設的display屬性值是block，當設定了浮動的同時，還設定了它的外邊距就會出現這種情況。也許你會問：「為什麼之後的物件和第乙個物件之間就不存在雙倍邊距的bug」？因為浮動都有其相對應的物件，只有相對於其父物件的浮動物件才會出現這樣的問題。第乙個物件是相對父物件的，而之後物件是相對第乙個物件的，所以之後物件在設定後不會出現問題。為什麼display:inline可以解決這個雙邊距bug，首先是inline元素或inline-block元素是不存在雙邊距問題的。然後，float:left等浮動屬性可以讓inline元素haslayout，會讓inline元素表現得跟inline-block元素的特性一樣，支援高寬，垂直margin和padding等，所以div class的所有樣式可以用在這個display inline的元素上。
2. ie6中浮動元素3px間隔bug：
發生場合：發生在乙個元素浮動，然後乙個不浮動的元素自然上浮與之靠近會出現的3px的bug。
解決方法：右邊元素也一起浮動；或者為右邊元素新增ie6 hack _margin-left:-3px;從而消除3px間距。
3. ie6/7負margin隱藏bug：
發生場合：當給乙個有haslayout的父元素內的非haslayout元素設定負margin時，超出父元素部分不可見。
解決方法：去掉父元素的haslayout；或者賦haslayout給子元素,並新增position:relative;
4. ie6/7下ul/ol標記消失bug：
發生場合：當ul/ol觸發了haslayout並且是在ul/ol上寫margin-left，前面預設的ul/ol標記會消失。
解決方法：給li設定margin-left，而不是給ul/ol設定margin-left。
5. ie6/7下margin與absolute元素重疊bug：
發生場合：雙欄自適應布局中，左側元素absolute絕對定位，右側的margin撐開距離定位。在ie6/7下左側應用了absolute屬性的塊級元素與右邊的自適應的文字內容重疊。
解決方法：把左側塊級元素更改為內聯元素，比如把div更換為span。
原理分析：這是由於ie6/ie7瀏覽器將inline水平標籤元素和block水平的標籤元素沒有加以區分一視同仁渲染了。屬於ie6/7瀏覽器渲染bug。
6. ie6/7/8下auto margin居中bug：
發生場合：給block元素設定margin auto無法居中
解決方法：出現這種bug的原因通常是沒有doctype，然後觸發了ie的quirks mode，加上doctype宣告就可以了。在《打敗ie的葵花寶典》裡給出的方法是給block元素新增乙個width能夠解決，但根據本人親測，加width此種方法是無效的，如果沒有doctype即使給元素新增width也無法讓block元素居中。
原理分析：缺少doctype宣告。
7. ie8下input[button | submit] 設定margin:auto無法居中
發生場合：ie8下，如果給像button這樣的標籤（如button input[type=」button」] input[type=」submit」]）設定如果不設定寬度的話無法居中。
解決方法：可以給為input加上寬度
原理分析：ie8瀏覽器bug。
8. ie8百分比padding垂直margin bug：
發生場合：當父元素設定了百分比的padding，子元素有垂直的margin的時候，就好像父元素被設定了margin一樣。
解決方法：給父元素加乙個overflow:hidden/auto。
陣列的深入學習
在以前的學習中，對陣列的認識只是簡單的陣列形式，儲存數，但深入學習其實現機理，發現大有文章，下面簡單表述一下 一 陣列是乙個型別，這個從陣列的定義說起 陣列的定義有兩種方式 以int為例，1.int a 2.int a 第一種定義方法是很多人習慣的，主要是早期的影響，第二種方法才是最適合的定義方法，...
Vuex的深入學習
一 狀態管理vuex 1.vuex使用 vuex是乙個專為vue.js應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以對應的規則保證狀態以一種可 的方式發生變化。1 state 單一狀態書，每個應用將僅僅包含乙個store例項 this.store.state.狀態名字 m...
UIApplication深入學習
新建乙個任意型別的ios應用工程，加入我們在class prefix輸入是tc，我們可以看到工程中生成乙個類 在main函式中，autoreleasepool 函式中 說明 當應用程式將要入非活動狀態執行，在此期間，應用程式不接收訊息或事件。比如來 了。說明 當應用程式入活動狀態執行，這個剛好跟上面...