盒子模型概述
1.認識盒子模型
所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容、內邊距、邊框和外邊距組成。
具體可以把盒子模型比作為一個手機盒子模型：
一個完整的手機盒子通常包含手機、填充泡沫和盛裝手機的紙盒。如果把手機盒子想象成HTML元素，那么手機盒子就是一個CSS盒子模型，其中的手機為CSS盒子模型的內容，填充泡沫的厚度為CSS盒子模型的內邊距，紙盒的厚度為CSS盒子模型的外邊距，當多個手機盒子放在一起時，它們之間的距離就是CSS盒子模型的外邊距。
網頁中的所有元素和對象都由上圖所示的基本結構組成，並呈現出矩形的盒子效果。在瀏覽器看來，網頁就是多個盒子嵌套排列的結果。其中，內邊距出現在內容區域的周圍，當給元素添加背景色或是背景圖像時，該元素的背景色或背景圖像也將出現在內邊距中，外邊距是該元素與相鄰元素之間的距離，如果給元素定義邊框屬性，邊框將出現在內邊距和外邊距之間。
需要注意的是，雖然盒子模型擁有內邊距、邊框、外邊框、寬和高這些基本屬性，但是並不要求每個元素都必須定義這些屬性。
2.<div> 標記
div是英文division的縮寫，意味“分割、區域”。<div>標記簡單而言就是一個區塊容器標記，可以將網頁分割為獨立的、不同的部分，以實現網頁的規划和布局。<div>與</div>之間相當於一個“盒子”，可以設置外邊距、寬和高，同時內部可以容納段落、標題、表格、圖像等各種網頁元素，也就是大多數HTML標記都可以嵌套在<div>標記中，<div>中還可以嵌套多層<div>。
在上面的圖片中，定義了兩對<div>，其中一對<div>中嵌套段落標記<p>。對兩對<div>分別添加class屬性，然后通過CSS控制其寬、高、背景顏色和文字樣式等。
注意：（1）：<div>標記最大的意義在於和浮動屬性float配合，實現網頁的布局，這就是常說的DIV+CSS網絡布局。
（2）：<div>可以代替塊級元素如<h>、<p>等，但是它們在語義上有一定的區別。
3.盒子的寬與高
網頁是由多個盒子排列而成的，每個盒子都有固定的大小，在CSS中使用寬度屬性width和高度屬性height可以對盒子的大小進行控制。width和height的屬性值可以為不同的單位的數值或相對於父元素的百分比，實際工作中最常用的是像素值。
上圖中，通過width和heigth屬性分別控制段落的寬度和高度，同時對段落應用了盒子模型的其他相關屬性，如邊框、內邊距、外邊距等。
符合CSS規范的盒子模型的總寬度和總高度的計算原則是：
1.盒子的總寬度=width+左右內邊距之和+左右邊框寬度之和+左右外邊距之和
2.盒子的總高度=height+上下內邊距之和+上下邊框高度之和+上下外邊距之和