CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
盒子模型具有屬性：
- content內容
- padding內邊距
- border邊框
- margin外邊框
如下圖：
其實，可以將盒子模型當作一個盒子去理解。
- content是盒子裏面裝的東西
- padding即是填充，就好像我們爲了保證盒子裏的東西不損壞，填充了一些東西，比如泡沫或者塑料薄膜，填充物有大有小，有軟有硬，反應在網頁中就是padding的大小了。
- border就是再外一層的邊框，因爲邊框有大小和顏色的屬性，相當於盒子的厚度和它的顏色或者材料。
- margin外邊距，就是我們的盒子與其他的盒子或者其他東西的距離。假如有很多盒子，margin就是盒子之間直接的距離，可以通風，也美觀同時方便取出。
CSS盒子模型又分爲兩種：
- 標準盒子模型
/* 標準模型 */
box-sizing:content-box;
標準盒子模型的範圍包括margin、border、padding、content,並且content部分不包含其他部分
- IE盒子模型
/*IE模型*/
box-sizing:border-box;
IE盒子模型的範圍包括margin、border、padding、content,和w3c盒子模型不同的是，IE盒子模型的content部分包含了padding和border.