css3 calc()功能小窺

之前，我們想要實現一個完美的寬度自適應的輸入框好麻煩，曾經也被作為對前端技術的一個挑戰。類似的常見場景還有100%寬+邊框的容器等。遇到這些情況，我們不得不分外小心，因為各個瀏覽器的表現可能不一致。
現在，firefox和webkit相繼支持calc()功能了，我們也可以學習下了。
calc()是干嘛的？

calc()是單詞calculate(計算)的縮寫，是css3的一個新的長度單位功能，可以使用簡單的數學運算。
嗯，CSS3越來越高級了。
運算規則

calc()使用通用的數學運算規則，但是也提供更智能的功能：
使用“+”“-”“*”“/”四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進行計算。
實例：

我們來看幾個小例子來理解下calc()功能吧：
1
2
3
4
.box{
border:1px solid #ddd;
width:calc(100%-2px)
}
容器寬度加上邊框寬度正好100%。
1
2
3
.box{
width:calc(10em+20px)
}
寬度，10em加20px。
1
2
3
4
5
6
7
.box{
margin-left:20px;
width:calc(100%/3-20px);
}
.box:nth-child(3n){
margin-left:0;
}
3欄等寬布局。
瀏覽器支持

firefox 4.0+已經開支支持calc()功能，不過要使用-moz-calc()私有屬性，chrome從19 dev版，也開始支持私有的-webkit-calc()寫法，IE9這次則牛逼了一次，原生支持標准的不帶前綴的寫法了。Opera貌似還不支持～～
所以如果我們要用這個屬性的話，要記得帶上各瀏覽器的兼容性。
UPDATE @2012-05-15
eric meyer提到w3c規范的一條備注(評論里面的同學也有提到)：
Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces. via CSS3 Values and Units specification
也就是說，”+”、”-”兩個符號邊上必須要有空格，而”*”、”/”符號則不是必須的。
然后我們可能要這樣寫：
width: calc(100%/3 - 2*1em - 2*1px);
這樣寫也是可以的：
width: calc(100% / 3 - 2 * 1em - 2 * 1px);
但是這樣寫就是錯的：
width: calc(100%/3-2*1em-2*1px);
嗯，這樣很容易寫錯啊。還好現在支持的瀏覽器還不太多，我會繼續觀望並保持更新~~