在舊有的低版本 IE 中，尤其是 IE6 的時代，那個時候是沒有所謂的 box-sizing這個屬性，而是有一個叫怪異模式（Quirks mode）的玩意。為什麼要提到這個怪異模式（Quirks mode）呢，主要還是因為這個模式下計算頁面元素的盒模型跟標準模式是存在差異的，簡單來說就跟現在我們用 box-sizing: border-box; 是類似的。但，很關鍵的事是在怪異模式（Quirks mode）下還會引發其它問題，似乎好像是 JS 方面的，我不懂，所以，跳過盒模型的模式，不談！就扯一下屌的不要不要的 box-sizing。
說實在的，對於 CSS 中的每個屬性，從個人感受來說，都很屌。鑑於現在大家都在寫移動端頁面居多，然後經常要去算一個元素所佔據的空間大小，並且都會去增加 box-sizing 這個屬性。那麼對於這個屬性不知道大家是否有跟我一樣的感覺：好屌，好爽！
width:100% + padding: 0 10px
這樣的情況下，寬度還是只要計算百分百就好了，完全不用去擔心超過 100% 的寬度，導致容器的撐開。
為什麼增加了這個屬性，哦，還要一個屬性值 border-box，那麼為什麼box-sizing: border-box;這個屬性和屬性值會讓我們不用擔心元素超過 100% 的寬度呢（其實高度也是一樣的，只是我們一般都考慮寬度而已）。
考慮為什麼之前，我們先看一下 box-sizing 的幾個屬性值：
然後我們再看一下在一個頁面中的塊級元素所應該具有的盒模型是包含哪些的，看這個大家都應該熟悉的圖：
從圖中可以看到中心部分是 content 內容區域，然後依次往外是：padding、border、margin（請忽略最外層的 position ）
為了偷懶，還是就先看寬吧，高這個其實是類似的。
在扯box-sizing屬性的幾個屬性值之前，再看一下標準模式中計算盒模型的寬度是怎麼樣的：
margin-left + border-left + padding-left + content(width) + padding-right + border-right + margin-right
然後順帶看一下前面提到的 IE 怪異模式（Quirks mode）下是怎麼計算一個盒模型的寬度的：
margin-left + content(width) + margin-right
簡單了很多，對吧，其實這裡的 content(width) 是包含了 padding 和 border 這兩個屬性值的。
border-left + padding-left + content(width) + padding-right + border-right
這個時候回頭看一下 box-sizing 的兩個屬性值，套進去後，就是這樣了：
得，扯到最後又回到前面說的不想扯的盒模型，好啊，其實這個box-sizing就是改變盒模型計算方式的，在寫移動端頁面的時候，有時候為了方便（也有人為了省事）就直接全部用* {box-sizing: border-box;}了，至於怎麼用比較好，完全是看個人所好。
哦，對了，還有一個，就是盒模型這個要理解的話，以前我是用快遞盒子來做比喻的：
margin： 多個快遞盒子堆放或者平放時的間距；
border： 每個快遞盒子的那個紙盒部分，作為與外界隔開的媒介；
padding： 快遞盒子與物體之間的填充物，避免磕磕碰碰導致物件損壞的那部分；
width： 就是盒子裡面最終需要用來快遞的那個物件
那么正常情況下，我們都是會塞點填充物來保護物件的，但有時候呢，其實我們可以不需要這些填充物來保護。
閒扯CSS的那些事兒，沒啥事兒就談談CSS
不深入，只扯淡
扯點自己想說的，或許也是你想聽的，沒有高深的東西，但應該不是平庸的……