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