1.什麼是盒子模型
例子說明：
上圖中，紅色邊框爲手機的外包裝盒，而且外包裝盒有一定的厚度(border)， 爲了保
護手機在運送的過程中不被磕壞，我們在盒子裏面四周填充了一層泡沫， 並且泡沫也有一定
的厚度(padding)，這層泡沫將手機包裹住， 手機就是整個盒子的核心內容(content)。
可以這麼對比記憶：
手機------>>>內容(content)
泡沫------>>>padding
包裝盒---->>>boder
外包裝間距-->>>margin
2.盒子取值計算
我們在修改頁面元素位置的時候， 需要設定它相對於盒子的位置， 那麼我們有必要清楚關於盒子模型裏面的取值相關問題。
在 CSS 中， width 和 height 指的是內容區域的寬度和高度。 增加內邊距、邊框和外邊
距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。 而默認情況下，內邊距、邊框和
外邊距的值均爲 0.
佔據頁面大小的區域是整個元素框的總尺寸！ 默認情況， padding、 margin、 border
均爲 0，假如我們設定了區域內容的 width 和 height，那麼此時整個元素框的總尺寸就是
該區域內容的寬高了，此時，如果設定了 margin 值，那麼整個元素框的總尺寸會發生變化
(變大了)， 但是我們希望它的整體佈局不發生變化！所有我們可以修改區域內容的尺寸(原
有大小減去設定的 margin 值)。
圖解說明盒子模型取值問題
