對CSS盒子模型的理解，以及闡述了margin、border、padding、content的作用和在標準模式與怪異模式的區別。

盒子模型

在CSS這個一切皆為框的世界里，今天我想談談我對CSS盒子模型的理解，如有不妥，請狠狠拍磚。

一、什麼是CSS盒子模型呢？

通俗一點，CSS盒子模型由外邊距（margin）、邊框（border）、內邊距（padding）、元素內容（content）組成，請見下圖：

二、盒子模型中margin、border、padding、content的各自作用

（1） margin：

自己的理解

控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。註意：行內元素是木有margin-top、margin-bottom的。

CSS權威指南

邊界，元素周圍生成額外的空白區。“空白區”通常是指其他元素不能出現且父元素背景可見的區域。

下麵通過具體的demo初步來瞧瞧margin的作用，比如有兩個塊級元素，如div，在它們margin都設置為0時，效果是這樣的：

 1 <!DOCTYPE html>
 2     <head>
 3         <title>no_margin</title>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5         <style>
 6             * {
 7                 margin:0;
 8                 padding:0;
 9             }
10             div {
11                 width:80px;
12                 height:80px;
13                 line-height:80px;
14                 text-align:center;
15             }
16             .div1 {
17                 background:#9FCD82;
18             }
19             .div2 {
20                 background:#C8ECCC;
21             }
22         </style>
23     </head>
24     <body>
25         <div class="div1">
26             div1
27         </div>
28         <div class="div2">
29             div2
30         </div>
31     </body>
32 </html>

View Code

倘若我想要讓div2的上邊距遠離div1一些距離，如10像素呢？我們可以設置相對應的div2樣式margin-top:10px，設置後的結果見下圖

 1 <!DOCTYPE html>
 2     <head>
 3         <title>no_margin</title>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5         <style>
 6             * {
 7                 margin:0;
 8                 padding:0;
 9             }
10             div {
11                 width:80px;
12                 height:80px;
13                 line-height:80px;
14                 text-align:center;
15             }
16             .div1 {
17                 background:#9FCD82;
18             }
19             .div2 {
20                 background:#C8ECCC;
21                 margin-top:10px;
22             }
23         </style>
24     </head>
25     <body>
26         <div class="div1">
27             div1
28         </div>
29         <div class="div2">
30             div2
31         </div>
32     </body>
33 </html>

View Code

為達到div2距離div1垂直之間相距10像素的效果，也可以設置div1的margin-bottom:10px;

或者同時設置div1的margin-bottom:10px;和div2的margin-top:10px;

你可能會感覺奇怪，為什麼同時設置都可以呢？！！！

同時設置後它們的相對距離不應該是20px了嗎？！！！

這就又要涉及到margin的重疊問題啦。

css2.0規範中對於margin的重疊，描述是：水平邊距永遠不會重合，垂直邊距可能會在特定的框之間重合。

我靠，這個垂直邊距可能會在特定的框之間重合，是在哪個特定情況呢。請見下表

1、	在普通流中，兩個或者更多的塊級元素相鄰的垂直邊，會重合。如果邊距都為正數，選其最大的值；如果出現負邊距，則用正邊距減去負邊距。
2、	在一個浮動框和其它框之間的垂直邊距是不重合的。
3、	絕對定位的框與相對定位的框，邊距不重合

現在大家知道為什麼對前面demo中兩個div的邊距不是20px，而是10px了吧。

針對第2點--在一個浮動框和其它框之間的垂直邊距是不重合的。我還想談談，使用block元素+float+margin請註意在IE6下會出現一個雙邊距問題哦，常見的解決方案就是將block元素換成inline-block元素，不過ie6除了在某些機構外，估計也木有人用了吧！！！

（2） border:

它是可見的，你可以設置任何元素的邊框。如我將一個div設置為5px的黑色實線邊框border:5px solid #000000。見下圖：

 1 <!DOCTYPE html>
 2     <head>
 3         <title>border</title>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5         <style>
 6             * {
 7                 margin:0;
 8                 padding:0;
 9             }
10             div {
11                 width:80px;
12                 height:80px;
13                 line-height:80px;
14                 text-align:center;
15             }
16             .div1 {
17                 background:#9FCD82;
18                 border:5px solid #000000;
19             }
20         </style>
21     </head>
22     <body>
23         <div class="div1">
24             div1
25         </div>
26     </body>
27 </html>

View Code

（3）padding:

padding是設置內容區域與border的距離的，沒有負值；並且如果你不通過調試器來看，你是看不出padding設置的是多少值的。註意：行內元素沒有padding-top和padding-bottom。

（4）content:

內容。是內容占的區域content，而不是內容區域contentarea。

我靠，content != contentarea ?

答案：是的。

談到contentarea，那麼你就應該有必要清楚地瞭解什麼是標準盒子模型，什麼又是IE盒子模型啦。其實它們的區別在與對contentarea 的解析不同，說白了，就是對width、height解析不一樣啦，盒子都一樣，包括margin、border、padding、content。下麵我們具體來看一看這兩種模型，先從標準盒子模型開始：

標準盒子模型的width、height只包括內容區域 content，詳情見下圖

IE盒子模型的width、height則包括了內容區域的content、內邊距padding以及邊框border，詳情見下圖

這個怎麼解決！！！一個盒子在不同的瀏覽器解析不同！！！

不用擔心，申明文檔類型，一鍵快速解決。

<!DOCTYPE html>這個熟悉吧，它的作用就將標準模式和怪異模式統一為標準模式，當然解析盒子嘛，也就解析為標準模式咯。

我靠，那這是不是太霸道了點，強硬的你可能會說，我覺得IE盒子模型不錯呢，勞資就要用它，哈哈，不要動怒，css3中已經提供了這一屬性box-sizing，它有兩個值content-box和border-box。當你申明文檔類型<!DOCTYPE html>時，預設是content-box，也就是標準盒子模型，如果你想使用IE盒子模型，reset一下box-sizing為border-box就OK啦。

Bootstrap也是這麼做的哦，下圖是bootstrap的部分css reset，可供你參考。