盒模型簡介：

HTML元素可以分為三類：

塊狀元素（block）,

行內元素（inline）,

行內塊元素（inline-block）

塊狀元素：

1. 在預設情況下，寬度會自動鋪滿於父元素，也就是一個塊級元素會獨佔一行，而且他後面的元素會另起一行顯示；
2. 寬（width),高（height），內邊距，外邊距是可以進行具體設定的 ；

行內元素：

1. 行內元素不會獨佔一行 ，相鄰的行內元素會依次排列，不足則換行；
2. 寬高是無法指定的，其大小是由裡面的內容撐開決定；
3. 雖然寬高無法指定，但是水平方向上的內邊距，外邊距是可以進行設定的；

對於一個盒子來說，它是由四部分組成，其中 margin叫做外邊距，border叫做邊框 ，padding叫做內邊距，content叫做內容邊距；

注意：

盒子在計算大小的時候有兩套你不同的標準，即有兩種盒模型 ：

1. W3C的標準模型：盒子的空間佔有度：content width +padding +border+ margin;
2. IE的怪異盒模型：盒子的空間佔有度：width(padding和border包含在內) +margin;

在CSS的標準盒模型中，width和height指的是內容區域的寬度和高度，增加內邊距，邊框 ，外邊距不會影響內容區域的尺寸，但是會增加盒子的大小；<這個問題可以通過 box-sizing屬性來解決，>

box-sizing:

該屬性用於更改預設CSS盒模型的型別；

box-sizing屬性的預設值為:content-box,也就是標準盒模型 ；

box-sizing的另外一個屬性值:border-box,指的是IE怪異盒模型；