致謝

box-sizing 最主要的用法是規定容器元素的最終尺寸計算方式。

如果你創造了一個 <div> 沒有設定 box-sizing 屬性為 border-box(不設定的話預設值為 content-box.)，同時你設定width:100px; border:10px solid red; padding:10px;那麼最終 div 容器的實際寬度為：

100px(width)+2*10px*(padding)+2*10px(border)=140px

所以你會得到一個比你預期（100px）還要更大的容器，結果就是會破壞網頁佈局。

注意：容易 margin 的尺寸不會被計算入最終容器寬度，因為對他的定義為對這個容器的留白，但不屬於容器本身。

如果當我們定義一個容器的 box-sizing 屬性為 border-box 時（表示式：br{box-sizing:border-box}），那麼我們建立一個和上段中相同設定的 <div> 容器時，那麼他的最終寬度即為 100px, 那麼它的內容部分（content）的有效寬度變成了100px-2*10px-2*10px =60px;所以你會得到一個你預期大小的盒子容器，但是隻是被壓縮了內容部分尺寸而已，但是對於整體佈局而言益處頗多。

所以要合理利用好這個屬性，這個屬性十分重要。