盒模型
每個塊級元素可以看做一個盒子
它有content,padding,border,margin
content就是它能裝的東西，padding可以理解做爲了防止盒子裏東西被摔壞放的塑料板泡沫板之類的東西
border就是盒子本身
margin是個盒子之間的縫隙，可以看做是爲了方便取盒子留下的縫隙
另一點需要說明的是，我們通過JavaScript代碼獲取某一個元素的大小時，所得到的width和height其實是盒子模型中的content的大小
box-sizing
box-sizing有三個值
| content-box | w3c標準盒模型 | 其中content-box指的是，元素的width屬性值等於該元素內容的寬度，不加上padding和border，實際上能盛多大的東西它就是多大 |
| border-box | IE傳統 | border-box指的是，元素的width等於元素內容寬度+左右padding值+左右border值 |
| inherit |
盒模型的使用場景：
設置子類元素的margin或者border時，可能會撐破父層元素的尺寸，這時我就需要使用box-sizing: border-box來將border包含進元素的尺寸中，這樣就不會存在撐破父層元素的情況了