前置
在 CSS 盒子模型的預設定義裡，你對一個元素所設定的 width 與 height 隻會應用到這個元素的内容區。如果這個元素有任何的 border 或 padding ，繪制到螢幕上時的盒子寬度和高度會加上設定的邊框和内邊距值。這意味着當你調整一個元素的寬度和高度時需要時刻注意到這個元素的邊框和内邊距。當我們實作響應式布局時，這個特點尤其煩人。
定義
CSS 中的 box-sizing 屬性定義了 user agent 應該如何計算一個元素的總寬度和總高度。
值
1.content-box 是預設值。如果你設定一個元素的寬為100px，那麼這個元素的内容區會有100px 寬，并且任何邊框和内邊距的寬度都會被增加到最後繪制出來的元素寬度中。
2.border-box 告訴浏覽器：你想要設定的邊框和内邊距的值是包含在width内的。也就是說，如果你将一個元素的width設為100px，那麼這100px會包含它的border和padding，内容區的實際寬度是width減去(border + padding)的值。大多數情況下，這使得我們更容易地設定一個元素的寬高。