盒模型，包括content(width+height)、padding、border、margin四部分，具體視圖如下：
平時使用chrome的開發(fā)者模式進行調試的時候，每個盒模型都會像上圖一樣被列出來，方便我們找出bug所在。（另外，還可以直接在開發(fā)者模式里增減修改代碼，實時觀測頁面變動，方便快捷)
content：即上圖padding?下虛線里的部分，在盒模型里輸入的內容會在里面顯示。
padding：內邊距，會增大盒子面積，賦值從上開始順時針進行，具體如下--
1.當只有一個值的時候，四周都是一樣的內邊距；
2.當只有兩個值?的時候，第一個值控制上下，第二個值控制右左；
3.當有三個值的時候，第一個值控制上，第二個值控制右左，第三個值控制下；
4.當有四個值的時候，按照padding賦值原則進行。
例如padding: 10px 20px 30px 40px;即padding-top :10px;padding-right:20px;padding-bottom:30px;padding-left:40px.
border:是外嵌的，會增大盒子的面積。細分出?的屬性有很多，例如--
border-width: 2px;
border-style: dashed;
border-color: cyan;
border-top-radius:10px;
.....
經(jīng)常用?的屬性可以匯在一起寫，即border：寬度 線型 顏色。
線型一般有：solid（實線）、double（雙實線）、dashed（虛線）、dotted（點線）。
顏色一般用三種方式表示：直接賦值（color:black);十進制賦值(rgb(12,45,3);十六進制賦值(#2fe800).
注意：使用padding和border時注意相應減少盒子的寬高值（寬/高-padding/border-width*2)
盒子面積s =(border-left-width+padding-left+width+border-right-width+padding-right)*(border-top-width+padding-top+height+padding-bottom+border-bottom-width)
margin：外邊距，設定與周圍元素的距離。賦值順序同padding。
注意：同級塊屬性使用margin會出現(xiàn)上下疊壓現(xiàn)象，即?兩者間距離取決于margin值大者。如果是使用了float或者display屬性從而同排顯示的話，兩者的距離為其margin值之和。
當?塊屬性層級結構為父子級時，當對第一個子級使用margin-top時，效果會轉移到父級，即相當于對父級?設置了margin-top。
解決方法--
1.為父級添加一個border,但是會增加計算量,拓展性受到一定的限制；
2.為父級添加一個屬性，overflow: hidden;
3.不使用margin-top，對父級使用padding-top。
