目錄
一、圖解
說明：由內而外依次是content、padding（內邊距）、border（邊框）、margin（外邊距）。
舉個例子：一個快遞車里放了許多快遞包裹（盒子包裝的），每個包裹里面又放了不同的東西。
content：真正容納其他東西的區域。比如快遞車的content，就是那些包裹所處的那個空間；
而每個包裹的content，就是那些東西所處的空間。
content里面可以放置 其他元素、文本、圖片等。
border： 盒子的邊框。比如快遞車的那個鐵皮，包裹外層的那個盒子。
可以指定邊框的顏色、粗細(width)、樣式等。
padding：content到border之間的距離。
margin： 包裹和包裹之間的距離。這個距離可以是負的，因為可以相互疊加。
注意事項：由於各個瀏覽器會對元素的margin、padding值進行不同值的初始化。
所以每次寫樣式時，需要對頁面內涉及到的元素進行初始化。
/* 將當前頁面內涉及的元素表簽列出來 */ body,div,span{ margin:0px; padding:0px;
}
二、盒模型尺寸基准
默認情況下，設置一個元素的width、height，其實設置的就是content的寬度和高度。
Q：那這個元素的實際寬度、實際高度是多少呢？
A：實際寬度=左margin + 左border + 左padding + content + 右padding + 右border + 友margin ；實際高度同理。
Q：那么問題來了，我如果想直接設置某個元素的實際高度怎么辦呢？
A：CSS3新增加了一個屬性box-sizing就是用來解決這個問題。它有三個值：content-box、border-box、inherit。
content-box：就是通常的默認情況，指的是content的高度、寬度。
border-box ：字面意思不難看出，指的就是border以內（包含border）的高度、寬度。
inherit：從父級元素繼承box-sizing屬性的值。
三、使用瀏覽器的開發者工具，查看元素高(寬)度時，遇到的問題
使用谷歌瀏覽器審查元素功能時，它會職能的提示出當前元素的高度、寬度。但經過計算元素的實際高度、寬度，發現與提示的信息不一致。
<style> div { width: 200px; padding: 20px; border: 1px solid red; margin: 10px;
}
</style>
<div>文本內容</div>
通過計算得出，div的實際寬度= 10 + 1 + 20 + 200 + 20 + 1 + 10 = 262px;
而開發者工具展示出來的結果為242px，差了20px;
通過調整不同參數，最后得出結論為： 審查元素計算出來的結果是不包括 margin值的。