網頁設計中常聽的屬性名：内容(content)、填充(padding)、邊框(border)、邊界(margin)， CSS盒子模式都具備這些屬性。
這些屬性我們可以用日常生活中的常見事物——盒子(箱子)作一個比喻來了解，是以叫它盒子模式。
CSS盒子模型就是在網頁設計中經常用到的CSS技術所使用的一種思維模型。
結構：
1、内容（content），指的就是裝的東西。
2、填充（padding），指的是防止重要的東西損壞而添加的泡沫或者其它抗震的輔助材料。
3、邊框（border），指的就是盒子本身。
4、邊界（margin），指的盒子擺放的時候的不能全部堆在一起，要留一定空隙、空間保持通風，同時也為了友善取出。
在網頁設計上，内容常指文字、圖檔等元素，但是也可以是小盒子（DIV嵌套），與現實生活中盒子不同的是，現實生活中的東西一般不能大于盒子，否則盒子會被撐壞的，而CSS盒子具有彈性，裡面的東西大過盒子本身最多把它撐大，但它不會損壞的，填充隻有寬度屬性，每個HTML标記都可看作一個盒子。
---以上内容摘至于百度全科
一、盒子模式概念
1、生活中的盒子
2、盒子模式（Box Model）
在網頁布局中，為了能夠使紛繁複雜的各個部分合理地進行組織，通過研究，總結出了一套完整的、行之有效的原則和規範，這就是“盒子模型”的由來。
在CSS中，一個獨立的盒子模型由内容(content)、邊框(border)、填充(padding)和邊界(margin)4個部分組成：
- 内容(content)：對應盒内物品。
- 邊框(border)：對應包裝盒的紙殼，具有厚度。
- 填充(padding)：位于邊框内部，是内容與邊框的距離，對應包裝盒的填充部分。
- 邊界(margin)：位于邊框外部，是邊框外面周圍的間隙，對應紙殼外圍間隙。
二、盒子模式屬性
1、内容（content）
内容隻有寬度、高度，分别是width、height。
2、填充（padding）
用于控制内容與邊框之間的距離，會占據空間。 可設定盒子模型上、右、下、左4個方向的内邊距值，padding屬性的值可以為0，即無内邊距。
書寫格式如： padding-top: 1px; padding-right: 1px; padding-bottom: 1px; padding-left: 1px;
縮寫格式： padding: 1px 1px 1px 1px;
3、邊框（border）
用于分隔不同元素，會占據空間，有4條邊框、可無邊框（設定為0）。
文法：border: border-width||border-style||border-color; 縮寫：border: 2px solid red;
注：
border-style--邊框的樣式：
- solid--實線邊框
- dashed--虛線邊框
- double--雙線邊框
- groove--根據 border-color 的值畫3D凹槽
- ridge--根據 border-color 的值畫3D凸槽
- inset--根據 border-color 的值畫3D凹邊
- outset--根據 border-color 的值畫3D凸邊
4、邊界
用于控制元素之間的距離，會占據空間。
可設定盒子模型上、右、下、左4個方向的外邊距值；margin屬性的值可以為0，即無外邊距。
注：body本身是個盒子，預設情況下，有若幹像素填充、邊界。
由于不同浏覽器的内外邊距不同，是以統一使用body,div{padding: 0;margin: 0;}清除預設的内外邊距。不建議使用*｛padding: 0;margin: 0;｝
5、盒子模式的總尺寸
盒子模式的總尺寸=margin+border-width+padding+content(寬度/高度)
元素的尺寸=border-width+padding+content(寬度/高度)
如下：
#div1 {
width: 100px;
height: 100px;
padding: 70px;
border: 70px solid red;
margin: 40px;
background-color: blue;
color: white;
text-align: center;
}
div的尺寸=border-left + padding-left + content + padding-right + border-right
= 70 + 70 + 100 + 70 + 70 = 380px