了解box-sizing之前要先知道box model(盒模型)的概念：
CSS中的所有內容周圍都有一個框框包裹，html的每個元素都像一個盒子，這些框是能夠使用CSS創建佈局，或將元素與其他元素做水平或垂直對齊。
而其最終寬度及高度都會受到padding(內距)以及border(邊框)影響，但不受margin(外距)影響。
如下圖所示，其最終寬度及高度並非設定的width: 300px，height: 300px，而是加上padding與border後，寬高各增加為420px。
如此一來每次都要經過計算才能確保其最終寬高，是相當麻煩的！所以這時候加上box-sizing便可以無須加總計算，設定後的width及height皆為最終寬度，padding及border會被限制設定的寬高值裡向內縮。如下圖所示：
而在 Bootstrap 裡，box-sizing已經是預設值，在每個元素上設定全域性的 box-sizing，包括 *::before 和 *::after 皆為border-box。這確保元素物件 padding 或 border 不會超過設定的寬度數值。
參考文章：MDN web docs、Bootstrap
