盒子模型是CSS控制頁面時一個很重要的概念。所有頁面中的元素都可以看成是一個盒子，佔據著一定的頁面空間。可以通過調整盒子的邊框和距離等引數，來調節盒子的位置和大小。
1. 盒子的內部結構
在CSS中，一個獨立的盒子模型由content（內容）、border（邊框）、padding（內邊接）和margin（外邊距）4個部分組成。
一個盒子實際所佔的寬度（或高度）是由“內容 + 內邊距 + 邊框 + 外邊距”組成的。在CSS中可以通過設定width和height的值來控制內容所佔的矩形的大小，並且對於任何一個盒子，都可以分別設定4條邊各自的border、padding和margin。
2. 邊框（border）
border一般用於分隔不同元素，border的外圍即為元素的最外圍，在計算元素實際的寬和高時，需要將border納入，即border會佔據空間。
border的屬性主要有3個，分別是color、width和style。在使用CSS設定邊框的時候，可以分別使用border-color、border-width和border-style來設定。
對不同的邊框設定不同的屬性值方法：按照規定的順序，給出2個、3個或者4個屬性值。
◊ 如果給出1個屬性值，表示上下左右4條邊框的屬性值，同為一個值。
◊ 如果給出2個屬性值，前者表示上下邊框的屬性，後者表示左右邊框的屬性。
◊ 如果給出3個屬性值，前者表示上邊框的屬性，中間的數值表示左右邊框的屬性，後者表示下邊框的屬性。
◊ 如果給出4個屬性值，依次是上右下左邊框的屬性，即順時針排序。
示例：
border-style: solid;
border-style: solid dashed;
border-style: solid dashed dotted;
border-style: solid dashed dotted double;
對於border-width，border-color的屬性值設定與border-style類似，支援相同的縮寫形式。
border: 1px solid #ff0000;
3. 內邊距（padding）
padding內邊距用於控制內容與邊框直接的距離。
padding: 5px;
padding: 5px 10px;
padding: 5px 10px 2px;
padding: 5px 10px 2px 3px;
4. 外邊距（margin）
margin是元素與元素之間的距離。
margin: 5px;
margin: 5px 10px;
margin: 5px 10px 2px;
margin: 5px 10px 2px 3px;