盒模型彬犯，包括content(width+height)谐区、padding逻卖、border、margin四部分炼杖，具體視圖如下：
平時使用chrome的開發(fā)者模式進行調(diào)試的時候盗迟，每個盒模型都會像上圖一樣被列出來，方便我們找出bug所在艇纺。（另外，還可以直接在開發(fā)者模式里增減修改代碼蚓聘，實時觀測頁面變動员帮，方便快捷)
content：即上圖padding?下虛線里的部分，在盒模型里輸入的內(nèi)容會在里面顯示氯材。
padding：內(nèi)邊距硝岗，會增大盒子面積，賦值從上開始順時針進行冗尤，具體如下--
1.當只有一個值的時候胀溺，四周都是一樣的內(nèi)邊距；
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值之和晚树。
當?塊屬性層級結(jié)構為父子級時，當對第一個子級使用margin-top時慨亲，效果會轉(zhuǎn)移到父級宝鼓，即相當于對父級?設置了margin-top。
解決方法--
1.為父級添加一個border,但是會增加計算量,拓展性受到一定的限制蛉签；
2.為父級添加一個屬性，overflow: hidden;
3.不使用margin-top柠座，對父級使用padding-top片橡。
