深入理解css中的margin屬性
之前一直覺得margin是非常的easy，最近在公司中遇到了一些問題，所以仔細研究了以下，才發現這margin原來深不可測啊，遂有了這篇文章！
重磅一：margin–基礎知識
要介紹margin的基礎知識，我們不可迴避地要談到css盒子模型（box model），一般而言，css盒子模型是用來設計和布局的。它本質上是乙個盒子，包括：外邊距（margin）、邊框（border）、內邊距（padding）以及最中間的內容（content）。下圖即為盒子模型（這裡只談w3c規範的標準盒模型，而不談ie5和ie6在怪異模式中使用的非標準的盒子模型）：
我們要介紹的margin在最外層，因為margin（外邊距）一定是透明的，所以它可以用來使得不同的盒子之間留有一定的間隙從而達到布局美觀等效果。從上面的盒子模型中我們可以看到，margin在四周均存在，我們可以使用margin-top、margin-right、margin-bottom、margin-left分別設定這四個方向的margin值。（注：由於這部分知識較為基礎，所以我不再在這部分不做更多介紹）
重磅二：margin–在同級元素兄弟節點之間應用--分為水平和豎直兩種情況
（1）水平方向的外邊距合併
結論：兩個水平方向的盒子相遇，則兩者最終的距離為左側盒子的右外邊距和右側盒子的左外邊距之和（2）豎直方向的外邊距合併
結論：兩個豎直方向的盒子相遇，則兩者豎直方向的最終的距離為上方盒子的下外邊距和下方盒子的上外邊距中較大的乙個。
（3）
設有乙個元素同時設定了margin-top和margin-bottom，但是內容為空，那麼這兩個margin值也會疊加，值為兩者最大的乙個
重磅三：margin–在父元素和子元素之間的應用！！！重中之重！！！
首先在頁面中寫乙個父div和乙個子div，大小不同，**如下：
首先全部復原，回到最初的起點，呆呆的站在鏡子前。。。。。就是這樣子
此時我給子元素div乙個margin-top,這時候就真的發生變化了。
這並不是我們想要的效果啊，我們希望子元素的上部距離父元素的上部為50px，可是我們看到的卻是父元素的上部距離瀏覽器頁面的上部有50px的距離，這是為什麼呢？**出現問題了呢？
實際上這是因為當父元素沒有設定padding值以及border值時，出現了乙個bug--父元素的上方與子元素的上方完全重合在了一起，無法分開。所以才會導致上述這種父元素和子元素同時向下的情況
解決辦法：
以上方法均經過試驗，均可解決此bug，得出的結果：
只是有些方法因為加了border和padding,會有一些小小的誤差，此乃美中不足！
重磅四：當margin的值為%時，結果出乎你的意料
水平方向沒有問題，是以父元素的百分比，但是在同級元素中使用豎直方向的margin時會出現意想不到的結果
由此可看到。豎直方向的百分比的margin還是以父元素的寬度作為基準進行計算的，而與父元素的高度無關
結論一句話總結：
margin只要以%為單位，它的margin值都是以父元素的寬度為基準進行計算的
stay foolish,stay hungry!!!
都看到這裡了，左上角點個關注，持續輸出高質量文章，點關注，不迷路！！！
CSS知識梳理之 margin
梳理完position，來到margin，每個知識點乙個乙個攻破啦 雖然margin可以應用到所有元素，但display屬性不同時，表現也不同 1.block元素可以使用四個方向的margin值 2.inline元素使用上下方向的margin值無效 3.inline block使用上下方向的marg...
CSS之margin樣式屬性
相對於同級的標籤設定偏移量 doctype html utf 8 title span in style head border 1px solid red height 300px width 300px margin bottom 20px in style background color b...
CSS藝術之 負margin之美
css中負邊距 nagative margin 是布局中常常使用的乙個技巧。僅僅要運用得當時常會產生奇異的效果。勘稱css中的奇淫巧計，非常多css布局方法都依賴於負邊距，掌握它對於前端童鞋來說還是非常重要的。文件流 自己的理解是從頭到尾依照文件的順序。該在什麼位置就在什麼位置，也能夠依照上面的意思...