css盒模型 margin padding border們你真的懂麼？

什麼是盒模型？  規定了元素框處理元素內容、內邊距、邊框和外邊距的方式。
咱們常說有兩種盒模型 即「標準 W3C 盒子模型」和「IE 盒模型」。但一般會加 DOCTYPE 聲明，在全部瀏覽器中就都顯示「標準 W3C 盒子模型」。下面以標準爲例：

首先要弄清楚的問題：實際大小的計算
在標準盒模型中     實際寬度 = width+margin+border+padding （高度同樣） 
例如 一個元素寬60px，通過 padding = 5px，border = 5px，margin = 10px，渲染後的實際寬度 = 60+5*2+10*2+5*2 = 100px；

不多有人關心的css盒模型的三維圖，如圖

好吧，我開始也不能理解這個東西又啥用...可是這個真的有用
我遇到過這樣的狀況,有一張圖片寬300做爲背景圖片，那麼我給定一個 div 300的寬度，而後要求內容裏這個框有10px的距離， 再給這個框一個padding：10px； 你以爲這個有什麼問題麼？好吧 無圖無真相  

我給一個div加了以下樣式，背景圖片大小300*100px 你以爲出現的會是怎麼樣的？

.test{
 width:300px;
 height:100px;
 padding:10px;
 border:1px solid #000;
 background:url(7.png) no-repeat 0 0;
 color:#fff;

真相 如圖..這是爲何 看着前面兩個盒模型本身去思考下吧  當時別人說我也硬是沒懂 要本身體會到了就到了....

再說下如何設定這幾個值

1，邊框 border
    邊框屬性：樣式，寬度，和顏色

    border-style: 沒有樣式，就沒有邊框
    經常使用樣式包括：solid（實線），dashed（虛線），none（無）
    能夠統一聲明，也能夠分別聲明
    四條邊框分別是：border-top-style,border-right-style,border-bottom-style,border-left-style
    統一聲明：border-style

    border-width: 默認寬度是4px
    一樣能夠統一聲明，也能夠分別聲明
    四條邊框分別是：border-top-width,border-right-width,border-bottom-width,border-left-width
    統一聲明：border-width

    border-color: 默認是黑色
    也是能夠統一聲明，也能夠分別聲明
    四條邊框分別是：border-top-color,border-right-color,border-bottom-color,border-left-color
    統一聲明：border-color
    
這三個屬性都有同樣的設定規則
div{border-style:solid dashed none dashed;} 這樣寫 上右下左 分別是solid dashed none dashed
div{border-style:solid dashed;} 這樣寫 上下是solid 左右是dashed
div{border-style:solid;} 這樣寫 4條邊框都是 solid
  border-width和  border-color規則同樣；

經常使用的寫法是這樣 div{border: 1px solid #fff}  等同於
 div{ border-width:1px;
        border-style:solid;
        border-colod:#fff;
}

2,邊距 margin 和 padding

    和邊框同樣，能夠統一聲明和分開聲明
    maigin
    margin-top,margin-rignt,margin-bottom.margin-left;
     div{margin: 1px 2px 3px 3px;} 
        這樣寫 上右下左的順序margin-top,margin-rignt,margin-bottom.margin-left分別是 1px，2px，3px，4px.        div{margin: 1px 2px;} 
        這樣寫 margin-top 和 margin-bottom 是1px， margin-right 和 margin-left是2px
    div{margin: 3px;} 
        這樣就是上下左右都是3px.
    padding規則和margin同樣....

最後來看看盒模型調皮的地方吧,,,,。。。頭疼....遇到過的問題

    問題一： 一個div{margin-bottom: 10px}，另外一個div{margin-top: 5px}，兩個div上下相鄰時，之間的距離是10px！
   解決：這個是瀏覽器margin重疊的問題，只會顯示較大的margin值，要兩個疊加用padding或者一個div 直接15px。轉載了一篇關於這個的文章 有點繞，要弄清楚的能夠看看 http://my.oschina.net/u/582995/blog/98171....

    問題二：IE下margin失效的問題，只知道是haslyout惹的禍
    解決方案：有幾個方法取，最簡單的：父元素 zoom:1。

    問題三：