css3 box-sizing

關於CSS重要的一個概念就是CSS盒子模型。它控制着頁面這些元素的高度和寬度。盒子模型多少會讓人產生一些困惑，尤爲當涉及到高度和寬度計算的時候。

由於盒模型寬高計算方式有兩種，對應box-sizing的兩種模式：content-box，border-box

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

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

content-box（傳統盒模型，有問題的盒模型）

• padding + border + width= 盒子的寬度
• padding+ border + height = 盒子的高度

border-box（不受干擾的盒模型）

• width = border + padding + 內容的width
• height = border + padding + 內容的 height

 

參考連接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing

　　　　　https://www.jianshu.com/p/e2eb0d8c9de6