背景：之前發現calc這個佈局新屬性之後就非常喜歡，愛不釋手。在公司的實習的時候，開發微信端的頁面，使用了幾次calc，後來發現在Android的上的不支持～蛋疼。於是到處找替代方案，終於在stackoverflow上找到一個滿意的答覆，好～接下來進入正文～
calc 與box-sizing 簡單介紹
* calc 屬性*
calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50% + 2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。
calc()的運算規則
- 使用“+”、“-”、“*” 和 “/”四則運算;
- 可以使用百分比、px、em、rem等單位；
- 可以混合使用各種單位進行計算；
- 表達式中有“+”和“-”時，其前後必須要有空格，如”widht:
- calc(12%+5em)”這種沒有空格的寫法是錯誤的；
- 表達式中有“*”和“/”時，其前後可以沒有空格，但建議留有空格。
兼容性
瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有“firefox for android 14.0”支持，其他的全軍覆沒。
box-sizing
語法
box-sizing ： content-box || border-box || inherit取值說明
- [1] content-box
此值爲其默認值，其讓元素維持W3C的標準Box Model，也就是說元素的寬度/高度（width/height）等於元素邊框寬度（border）加上元素內邊距（padding）加上元素內容寬度/高度（content width/height）即：Element Width/Height = border+padding+content width/height。
- [2] border-box
此值讓元素維持IE傳統的BoxModel（IE6以下版本），也就是說元素的寬度/高度等於元素內容的寬度/高度。（從上面Box Model介紹可知，我們這裏的content width/height包含了元素的border,padding,內容的width/height【此處的內容寬度/高度=width/height-border-padding】）。
兼容性：
佈局比較
**相比於box-sizing而言 calc的Android browser的支持性太差了，所以佈局的時候，box-sizing可以用來解決calc的問題
**
//html
<div class="sideBar">sideBar</div>
<div class="content">content</div>
//css
//使用calc
.content {
width: 65%； //照顧Android 平穩退化
width: calc(100% - 300px);
}
//使用box-sizing
.sideBar {
position: absolute;
top:0;
left:0;
width: 300px;
}
.content {
padding-left: 300px;
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
}以上的代碼來自於stackoverflow，非常棒的解決方案～
之後在工作中，發現bootstrap的源碼有這麼一段代碼～
box-sizing這個貨還是非常有用的呀～
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}最後記：
第一篇通過解決自己遇到的問題而來的文章～
參考資料：
