calc()能讓你給元素的做計算，你可以給乙個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說「width:calc(50% + 2em)」，這樣一來你就不用考慮元素div的寬度值到底是多少，而把這個煩人的任務交由瀏覽器去計算。
calc()的運算規則：
相容性
瀏覽器對calc()的相容性還算不錯，在ie9+、ff4.0+、chrome19+、safari6+都得到較好支援，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有「firefox for android 14.0」支援，其他的全軍覆沒。
語法
box-sizing ： content-box || border-box || inherit
相比於box-sizing而言 calc的android browser的支援性太差了，所以布局的時候，box-sizing可以用來解決calc的問題
//html
sidebar
content
//css
//使用calc
.content
//使用box-sizing
.sidebar
.content
之後在工作中，發現bootstrap的原始碼有這麼一段**～
box-sizing這個貨還是非常有用的呀～
*
*:before,
*:after
box sizing 與元素布局
box sizing是用來規定乙個元素及其border和padding的關係的屬性。以下均以寬高均為200px，padding及border width均為20px的元素來舉例說明兩種情況下的布局情況。div此情況下，元素的border及padding參與元素的尺寸計算。元素實際占用空間 width...
盒模型與box sizing
盒模型這個詞我們經常聽到過，不過沒有細細的了解。其實我們平常都有常用盒模型就是w3c標準的盒模型，標準盒模型的是height width pading border margin,這樣就組成乙個盒模型。盒模型分為2種 他們不同之處就是計算內容的寬高不同，ie盒模型寬度是包括width pading ...
box sizing與盒模型的認識
box sizing屬性 content box default border box。content box，border和padding不計算入width之內 border box，border和padding計算入width之內，其實就是怪異模式了 盒模型一共有兩種模式，一種是 標準模式 st...