相信只要是接觸過(guò)前端的，一定會(huì)對(duì)盒模型有著深深地記憶，整理了一下：
盒模型，由內(nèi)到外，分別是本身寬高、內(nèi)邊距、邊框。然后盒模型還可以有外邊距，之后解釋。
本身寬高，沒(méi)啥說(shuō)的了；
內(nèi)邊距即padding，表示從元素本身內(nèi)容到元素邊框的距離，分上下左右四個(gè)方向，可以有1~4個(gè)值，如下：
padding:10px;?
1個(gè)值，表示四個(gè)方向padding都是10像素大小；
padding:10px 20px;?
2個(gè)值，第一個(gè)值表示上下，padding-top=padding-bottom=10px; 第二個(gè)值表示左右，padding-left=padding-right=20px;
padding:10px 20px 30px;?
?3個(gè)值，第一個(gè)值表示上，padding-top=10; 第二個(gè)值表示左右，padding-left=padding-right=20px;第三個(gè)值表示下，padding-bottom=30px
padding:10px 20px 30px 40px;?
4個(gè)值，很好記，從上開(kāi)始，按順時(shí)針?lè)较蚣瓷嫌蚁伦蟮捻樞蚍謩e賦值，即padding-top=10px,padding-right=20px,padding-bottom=30px,padding-left=40px
另外，有個(gè)需要注意的點(diǎn)：使用padding會(huì)增大盒模型面積。
邊框即border
顧名思義，就是給盒模型加上一個(gè)邊界，這個(gè)邊界用有寬度有顏色有樣式的線(xiàn)組成，從而傳遞一個(gè)信號(hào)，邊框里面的東西，外界不能干預(yù)（在布局層面講，并且暫時(shí)不考慮層級(jí)的問(wèn)題）。
border-width ?邊框的寬度，沒(méi)啥講的，想給多寬直接設(shè)置；
border-color ? 邊框的顏色，也沒(méi)啥說(shuō)的，想要啥顏色直接給，近期會(huì)再寫(xiě)一篇關(guān)于顏色的文章；
border-style ? 也很好理解，style樣式嘛，比如最常用的實(shí)線(xiàn)虛線(xiàn)等，solid-實(shí)線(xiàn) ? ? dashed-虛線(xiàn) ? ?dotted-點(diǎn)線(xiàn) ? 三個(gè)最常用的屬性。
border還支持簡(jiǎn)寫(xiě)，border:2px solid red;什么意思呢？2像素寬的紅色實(shí)線(xiàn)邊框。
這里還有一個(gè)很好玩的屬性叫border-radius ,叫圓角度，就是讓方方正正的角，變得圓滑一些，
可以用它做很多圖形，當(dāng)然后面可以用畫(huà)布來(lái)做；需要注意的是，border的使用同樣會(huì)增加盒模型面積；
盒模型面積計(jì)算：S=(border-left + padding-left + width + padding-right + border-right) * (border-top + padding-top + height + padding-bottom + border-bottom);
用下圖來(lái)實(shí)戰(zhàn)一下：
S=(20+40+100+20+10)*(5+10+150+30+15)=39900;
margin
margin是用來(lái)調(diào)節(jié)元素之間位置的這么一個(gè)屬性，所以它不算在面積內(nèi)部，margin同樣有1~4個(gè)值，語(yǔ)法和padding是一樣的，有兩個(gè)要注意的點(diǎn)：
子債父償和上下疊壓
子債父償：產(chǎn)生原因：塊元素作為第一個(gè)子級(jí)，并且使用了margin或者margin-top。
效果：最開(kāi)始
然后給粉色塊一個(gè)margin-top想出現(xiàn)下面這個(gè)結(jié)果：
但是顯示的是這樣的：
不是子級(jí)相對(duì)于父級(jí)下移了，而是整體移動(dòng)，這就是子債父償，那么怎么解決呢？
有3個(gè)方法解決，①給父級(jí)一個(gè)border ?②不用margin，讓父級(jí)使用padding，把子級(jí)“擠下來(lái)” ；①②不推薦使用，因?yàn)闀?huì)讓父級(jí)面積增大，影響整體布局 ? ③為父級(jí)添加overflow:hidden，最常用也是最好用的解決辦法。
上下疊壓：在正常情況下，塊元素使用margin會(huì)出現(xiàn)上下疊壓現(xiàn)象，大家知道，margin是調(diào)整外部距離的，
這個(gè)情況下應(yīng)該是兩個(gè)塊之間隔開(kāi)150+100，一共250像素的位置，但是實(shí)際效果呢？
實(shí)際間隔是150（兩個(gè)值中大的那個(gè)），這就是上下疊壓現(xiàn)象。有問(wèn)題就會(huì)有解決方案：使用浮動(dòng)
完美解決。
