box-sizing

在 CSS 盒子模型的默認定義裏，你對一個元素所設置的 width 與 height 只會應用到這個元素的內容區。若是這個元素有任何的 border 或 padding ，繪製到屏幕上時的盒子寬度和高度會加上設置的邊框和內邊距值。這意味着當你調整一個元素的寬度和高度時須要時刻注意到這個元素的邊框和內邊距。當咱們實現響應式佈局時，這個特色尤爲煩人。

box-sizing 屬性能夠被用來調整這些表現:

content-box  是默認值。若是你設置一個元素的寬爲100px，那麼這個元素的內容區會有100px 寬，而且任何邊框和內邊距的寬度都會被增長到最後繪製出來的元素寬度中。
border-box 告訴瀏覽器：你想要設置的邊框和內邊距的值是包含在width內的。也就是說，若是你將一個元素的width設爲100px，那麼這100px會包含它的border和padding，內容區的實際寬度是width減去(border + padding)的值。大多數狀況下，這使得咱們更容易地設定一個元素的寬高。