不知道有多少老前端像我這樣，在項目中很少使用box-sizing這個屬性值。因為CSS2.1中只有content-box這一種盒子模式，在CSS3還沒有流行的時候，大家在工作中大量基於這種盒子模式寫CSS樣式，導致很多老前端即使是現在也默認使用content-box這種模式，很少手動寫box-sizing屬性聲明border-box盒子模式。最近在工作中發現，合理使用border-box確實可以提升開發速度。下面介紹一種工作中遇到的使用border-box的地方。
一個單頁應用，我們的公共樣式把頁面的body背景色給設定好了，其中有一個頁面需要另一種背景色，而且要全部覆蓋整個瀏覽器視窗。自然的，我們先把width和height聲明為100%。但設計圖里的頁面與瀏覽器視窗四周都有10px的邊距，無論是設置margin還是padding，都會在瀏覽器里出現滾動條。這是因為子元素的width和height的百分比是基於父元素的content計算的，在content-box模式下，導致子元素的盒子整體尺寸超過了父元素，所以出現了滾動條。以前，因為自己習慣用content-box，所以用CSS表達式calc(100% - 20px)來hack掉。但若大量使用CSS表達式會影響頁面性能的。因此，這個時候使用border-box就是一個很好的選擇。子元素的width值已經包含了padding值，所以設置padding不會導致滾動條的出現。
參考: css樣式的百分比都相對於誰？