盒模型

  盒模型指在css佈局中，html中的每一個元素在瀏覽器中的解析均可以被看做一個盒子，擁有盒子同樣的外形和平面空間。

  盒模型由 margin , border , padding , content 四部分組成。

  margin的幾種不一樣的寫法：

　　①main{margin:10px 20px 10px 20px;}這四個值分別設置類名爲main的模塊上、右、下、左四個方位外邊距的值。

　　②main{margin:10px 20px;}這兩個值分別設定類名爲main的模塊的上下、左右的外邊距。

　　③main{margin:10px 20px 10px;}第一個值設定上外邊距，第二個值設定左右外邊距，第三個值設定下外邊距。

　　④main{margin:10px;}若是就一個值的話，就設定了四個方向的外邊距都10px。

　　⑤main{ margin:20px auto;}這樣設值的意思是上下兩個方位的外邊距爲20px，左右兩個方位的外邊距自動適應居中。

  margin裏面的bug：

　　①margin橫向上是加法，可是豎向上倒是疊加的，那個值大就按那個值進行排列。

　　②在行標籤裏面設置margin時，橫向是能夠實現的，可是在豎向上就沒有

　　③IE6下的橫向雙倍bug，解決的辦法是：display：inline；

  盒標籤的標準模式是：內容的寬度+左右邊距的寬度+左右邊框的寬度+左右外邊距的寬度

             怪異模式是：內容+外邊距