一、標準盒模型和怪異模式盒模型
標準盒模型和怪異模式盒模型可以通過box-sizing來設(shè)置：
?標準盒模型：box-sizing: content-box
?怪異模式盒模型：box-sizing: border-box
兩種模型的區(qū)別：標準模式會被設(shè)置的padding撐開，而怪異模式則相當于將盒子的大小固定好，再將內(nèi)容裝入盒子。盒子的大小并不會被padding所撐開。
1.標準盒模型：盒子總寬度 = width + padding + border + margin
2.怪異模式盒模型：盒子總寬度 = width + margin
二、margin百分比
假設(shè)我們有這樣的一段HTML代碼，外面一個DIV寬度980px，高度500px，里面有一個子元素DIV，寬度和高度都不設(shè)置，然后給他設(shè)置margin:10% 5%，這個屬性相當于margin:10% 5% 10% 5%。
HTML代碼：
<div class="demo1"> <div>這個div設(shè)置：margin:10% 5%</div> </div>
CSS代碼：
.demo1{ height:500px; width:980px; margin:0 auto; background:#EEE; overflow:hidden;} .demo1 div{margin:10% 5%; background:#666;}
這里還出現(xiàn)了一個小的hack，就是demo1盒子不會緊挨著body，也就是不會定格布局，而且body元素上面還有一段空白，這段空白的高度剛好是.demo1 div元素的margin-top，demo1和.demo1 div元素都是頂格對其的，只要給demo1元素設(shè)置overflow:hidden，即可解決這個問題。
??我們根據(jù)以往的理解，.demo1 div的margin應該是：50px 49px 50px 49px，但是運行以后，通過查看盒模型示意圖，卻發(fā)現(xiàn)是：98px 49px 98px 49px:
得出結(jié)論：
當margin設(shè)置成百分數(shù)的時候，其top right bottom left的值是參照父元素盒子的寬度進行計算，在w3c的規(guī)范中也是這樣描述的： margin 的百分比值參照其包含塊的寬度進行計算，同樣的padding如果設(shè)置成百分數(shù)的話，其盒子模型和margin是一樣的。
??這只發(fā)生在默認的 writing-mode: horizontal-tb;和 direction: ltr;的情況下，當書寫模式變成縱向的時候，其參照將會變成包含塊的高度。
三、關(guān)于img的margin設(shè)置問題
margin-top 和 margin-bottom 值對行內(nèi)非替換元素（non-replaced inline element）是無效的。因此我們可以指定 img 元素的 margin-top 和 margin-bottom，而非替換行內(nèi)元素（如 i，span 等）設(shè)置 margin-top 和 margin-bottom 卻不會產(chǎn)生效果。
四、margin--在同級元素（非父子關(guān)系）之間應用
（1）水平方向的外邊距合并
兩個水平方向的盒子相遇，那么最終兩者之間的距離為左邊盒子的右外邊距和右邊盒子的做外邊距之和。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平方向的兩個盒子</title>
<style>
*{
margin:0;
padding:0;
border:0;
}
body{
font-size: 0;
}
.left{
width: 100px;
height: 100px;
background: red;
display: inline-block;
margin-right: 50px;
font-size: 20px;
}
.right{
width: 100px;
height: 100px;
background: yellow;
display: inline-block;
margin-left: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="left">寬為100px,右邊距為50px</div>
<div class="right">寬為100px,左邊距為50px</div>
</body>
</html>
效果圖：
補充說明：
大家可以看到，為了使得兩個div（塊狀元素）脫離正常的文檔流我使用了display:inline-block;屬性，另外，我還把body的font-size設(shè)置為0，這樣可以解決inline-block自身的問題，否則兩個div的舉例會大于100px。當然使用float也可以使得兩個div出現(xiàn)在同一行中。
如果使用
display: inline-block;,則會出現(xiàn)一個bug，例如li、a把設(shè)置成display: inline-block;，然后把padding和margin都設(shè)置為0還是會出現(xiàn)空隙，如：
此時有兩種方法設(shè)置間距為0：
1.將設(shè)置display: inline-block;的元素寫在一行。
2.將父元素設(shè)置為font-size: 0。
（2）豎直方向的外邊距合并
兩個豎直方向的盒子相遇時，其豎直方向的距離等于上方盒子的下外邊距和下方盒子的上外邊距中較大的一個。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平方向的兩個盒子</title>
<style>
*{
margin:0;
padding:0;
border:0;
}
.top{
width: 100px;
height: 100px;
margin-bottom: 100px;
background: red;
}
.bottom{
width: 100px;
height: 100px;
margin-top: 50px;
background: green;
}
</style>
</head>
<body>
<div class="top">高為100px,下邊距為100px</div>
<div class="bottom">高為100px,上邊距為50px</div>
</body>
</html>
此時兩個塊之間的間隙為100px，而非100+50px。
另外一個有趣的例子就是：假設(shè)有一個元素同時設(shè)置了margin-top和margin-bottom，但是內(nèi)容為空，那么這兩個margin值也會疊加，值為兩者最大的一個，它類似與豎直方向上兩個盒子margin值的疊加。代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平方向的兩個盒子</title>
<style>
*{
margin:0;
padding:0;
}
.top{
width: 500px;
height: 100px;
background: red;
}
.middle{
margin-top: 100px;
margin-bottom:50px;
}
.footer{
width: 500px;
height: 100px;
background: green;
}
</style>
</head>
<body>
<div class="top">上面的div,高100px</div>
<div class="middle"></div>
<div class="footer">下面的div，高100px</div>
</body>
</html>
我們發(fā)現(xiàn)這時在上面的div和在下面的div之間的舉例并不是100+50=150px，而是兩者中的最大者，即100px。
（3）margin--在父元素和子元素之間應用（重點）
（1）在子元素中設(shè)置水平方向的margin值，父元素設(shè)置padding：父子元素距離為margin+padding，不會疊加；
??（2）在子元素中設(shè)置豎直方向的margin值：margin-top: 100px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style>
*{padding:0; margin:0; border:0;}
.father{
width: 500px;
height: 500px;
background: red;
}
.son{
width: 100px;
height: 100px;
background: green;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">高度為100px，margin-top為100px。</div>
</div>
</body>
</html>
效果如下：
??我們希望子元素的上部距離父元素的上部為100px，可是我們看到的卻是父元素的上部距離瀏覽器頁面的上部有100px的距離，實際上這是因為當父元素沒有設(shè)置padding值以及border值時，出現(xiàn)了一個bug--父元素的上方與子元素的上方完全重合在了一起，無法分開。所以才會導致上述這種父元素和子元素同時向下的情況。
對于這種問題解決方法有下面幾種：
- 方法一：給父元素添加padding-top值
- 方法二：給父元素添加border值
- 方法三：給父元素添加屬性overflow:hidden;
- 方法四：給父元素或者子元素聲明浮動float;
- 方法五：使父元素或子元素聲明為絕對定位：position:absolute;
- 方法六：給父元素添加屬性 overflow:auto; positon:relative；
轉(zhuǎn)載自 http://www.cnblogs.com/zhuzhenwei918/p/6124263.html
margin的高度塌陷總結(jié)：
在標準文檔流中，豎直方向上的margin不疊加，以較大的為準，水平方向疊加無塌陷，如果不在標準文檔流中（例如絕對定位，浮動），無塌陷現(xiàn)象。
