box-sizing
box-sizing的CSS屬性是用來改變默認的CSS框模型
屬性
初始值：content-box
適用於：接受的所有元素的寬度或高度
繼承：無
媒體：visual
指定的：as specified
動畫：no
規范秩序：獨特的無歧義的正式語法定義的順序
語法
box-sizing: content-box（默認樣式） | padding-box | border-box
content-box，border和padding不計算入width之內
padding-box，padding計算入width內
border-box，border和padding計算入width之內，其實就是怪異模式了~
兼容性：
-webkit-box-sizing: /*chrome safari android*/
-moz-box-sizing: /*Firefox*/
box-sizing: /*Standard */
CSS3 calc() 會計算的屬性
calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。以前我們可以使用box-sizing:border-box;來設置盒子的屬性為不加上邊距。現在我們又多了一個選擇了。但要注意，兩者只能使用一個哦，否則就會造成沖突了。
calc()能做什么？
calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。
calc()語法
calc()語法非常簡單，就像我們小時候學加 （+）、減（-）、乘（*）、除（/）一樣，使用數學表達式來表示：
.elm { width: calc(expression); /*expression是一個表達式，用來計算長度的表達式。*/ }
calc()使用通用的數學運算規則，但是也提供更智能的功能：
1、使用“+”、“-”、“*” 和 “/”四則運算；
2、可以使用百分比、px、em、rem等單位；
3、可以混合使用各種單位進行計算；
4、表達式中有“+”和“-”時，其前后必須要有空格，如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的；
5、表達式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。
兼容性
瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各瀏覽器 廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有“firefox for android 14.0”支持，其他的全軍覆沒。
-moz-calc(expression);/*Firefox*/ -webkit-calc(expression);/*chrome safari*/ calc();/*Standard */