盒模型
在CSS中，"box model"這一術語是用來設計和布局時使用，然后在網頁中基本上都會顯示一些方方正正的盒子。我們稱為這種盒子叫盒模型。
盒模型有兩種：標准模型和IE模型。我們在這里重點講標准模型。
盒模型示意圖
盒模型的屬性
width：內容的寬度
height: 內容的高度
padding：內邊距，邊框到內容的距離
border: 邊框，就是指的盒子的寬度
margin：外邊距，盒子邊框到附近最近盒子的距離
如果讓你做一個寬高402*402的盒子，您如何來設計呢？
答案有上萬種，甚至上一種。
盒模型的計算
如果一個盒子設置了padding，border，width，height，margin(咱們先不要設置margin，margin有坑，后面課程會講解)
盒子的真實寬度=width+2*padding+2*border
盒子的真實寬度=height+2*padding+2*border
那么在這里要注意看了。標准盒模型，width不等於盒子真實的寬度。
另外如果要保持盒子真實的寬度，那么加padding就一定要減width，減padding就一定要加width。真實高度一樣設置。