所有HTML元素可以看作盒子，在CSS中闷盔，"box model"這一術(shù)語是用來設(shè)計和布局時使用。
CSS盒模型本質(zhì)上是一個盒子旅急，封裝周圍的HTML元素逢勾，它包括：邊距，邊框藐吮，填充溺拱，和實際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素谣辞。
下面的圖片說明了盒子模型(Box Model)：
box-model.gif
Margin(外邊距) - 清除邊框外的區(qū)域迫摔，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框泥从。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域句占，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容躯嫉，顯示文本和圖像纱烘。
當您指定一個CSS元素的寬度和高度屬性時，你只是設(shè)置內(nèi)容區(qū)域的寬度和高度祈餐。要知道擂啥，完全大小的元素，你還必須添加填充帆阳，邊框和邊距哺壶。.
最終元素的總寬度計算公式是這樣的：
總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
元素的總高度最終計算公式是這樣的：
總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
