之前，我們想要實(shí)現(xiàn)一個(gè)完美的寬度自適應(yīng)的輸入框好麻煩，曾經(jīng)也被作為對(duì)前端技術(shù)的一個(gè)挑戰(zhàn)。類似的常見場(chǎng)景還有100%寬+邊框的容器等。遇到這些情況，我們不得不分外小心，因?yàn)楦鱾€(gè)瀏覽器的表現(xiàn)可能不一致。

現(xiàn)在，firefox和webkit相繼支持calc()功能了，我們也可以學(xué)習(xí)下了。
calc()是干嘛的？

calc()是單詞calculate(計(jì)算)的縮寫，是css3的一個(gè)新的長(zhǎng)度單位功能，可以使用簡(jiǎn)單的數(shù)學(xué)運(yùn)算。

嗯，CSS3越來(lái)越高級(jí)了。
運(yùn)算規(guī)則

calc()使用通用的數(shù)學(xué)運(yùn)算規(guī)則，但是也提供更智能的功能：

    使用“+”“-”“*”“/”四則運(yùn)算；
    可以使用百分比、px、em、rem等單位；
    可以混合使用各種單位進(jìn)行計(jì)算。

實(shí)例：

我們來(lái)看幾個(gè)小例子來(lái)理解下calc()功能吧：

CSS Code復(fù)制內(nèi)容到剪貼板

.box{ border:1px solid #ddd; width:calc(100%-2px) }  

容器寬度加上邊框?qū)挾日?00%。

CSS Code復(fù)制內(nèi)容到剪貼板

.box{ width:calc(10em+20px) }  

寬度，10em加20px。

CSS Code復(fù)制內(nèi)容到剪貼板

.box{ margin-left:20px; width:calc(100%/3-20px); }    
.box:nth-child(3n){ margin-left:0; }  

3欄等寬布局。
瀏覽器支持

firefox 4.0+已經(jīng)開支支持calc()功能，不過(guò)要使用-moz-calc()私有屬性，chrome從19 dev版，也開始支持私有的-webkit-calc()寫法，IE9這次則牛逼了一次，原生支持標(biāo)準(zhǔn)的不帶前綴的寫法了。Opera貌似還不支持～～

所以如果我們要用這個(gè)屬性的話，要記得帶上各瀏覽器的兼容性。

eric meyer提到w3c規(guī)范的一條備注(評(píng)論里面的同學(xué)也有提到)：

    Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces. via CSS3 Values and Units specification

也就是說(shuō)，”+”、”-“兩個(gè)符號(hào)邊上必須要有空格，而”*”、”/”符號(hào)則不是必須的。

然后我們可能要這樣寫：

CSS Code復(fù)制內(nèi)容到剪貼板

width: calc(100%/3 – 2*1em – 2*1px);  

這樣寫也是可以的：

CSS Code復(fù)制內(nèi)容到剪貼板

width: calc(100% / 3 – 2 * 1em – 2 * 1px);  

但是這樣寫就是錯(cuò)的：

CSS Code復(fù)制內(nèi)容到剪貼板

width: calc(100%/3-2*1em-2*1px);  

嗯，這樣很容易寫錯(cuò)啊。還好現(xiàn)在支持的瀏覽器還不太多，我會(huì)繼續(xù)觀望并保持更新~~