相信只要是接觸過前端的，一定會對盒模型有著深深地記憶，整理了一下：

盒模型，由內到外，分別是本身寬高、內邊距、邊框。然后盒模型還可以有外邊距，之后解釋。

本身寬高，沒啥說的了；

內邊距即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（兩個值中大的那個），這就是上下疊壓現象。有問題就會有解決方案：使用浮動

完美解決。