之前，我們想要實現乙個完美的寬度自適應的輸入框好麻煩，曾經也被作為對前端技術的乙個挑戰。類似的常見場景還有100%寬+邊框的容器等。遇到這些情況，我們不得不分外小心，因為各個瀏覽器的表現可能不一致。
現在，firefox和webkit相繼支援calc()功能了，我們也可以學習下了。
calc()是幹嘛的？
calc()是單詞calculate(計算)的縮寫，是css3的乙個新的長度單位功能，可以使用簡單的數**算。
嗯，css3越來越高階了。
運算規則
calc()使用通用的數**算規則，但是也提供更智慧型的功能：
使用「+」「-」「*」「/」四則運算；
可以使用百分比、px、em、rem等單位；
可以混合使用各種單位進行計算。
例項：我們來看幾個小例子來理解下calc()功能吧：
css code複製內容到剪貼簿
容器寬度加上邊框寬度正好100%。
css code複製內容到剪貼簿
寬度，10em加20px。
css code複製內容到www.cppcns.com剪貼簿
3欄等寬布局。
瀏覽器支援
firefox 4.0+已經開支支援calc()功能，不過要使用-moz程式設計客棧-calc()私有屬性，chrome從19 dev版，也開始支援私有的-webkit-calc()寫法，ie9這次則牛逼了一次，原生支援標準的不帶字首的寫法了。opera貌似還不支援～～
所以如果我們要用這個屬性的話，要記得帶上各瀏覽器的相容性。
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
也就是說，」+」、」-「兩個符號邊上必須要有空格，而&程式設計客棧rdquo;*」、」/」符號則不是必須的。
然後我們可能要這樣寫：
css code複製內容到剪貼簿
這樣寫也是可以的：
css code複製內容到剪貼簿
但是這樣寫就是錯的：
css code複製內容到剪貼簿
嗯，這樣很容易寫錯啊。還好現在支援的瀏覽器還不太多，我會繼續觀望並保持更新~~
本文標題: 初探css3中的calc()功能
本文位址:
css3 中的calc用法
calc 函式用於動態計算長度值。1.需要注意的是，運算子前後都需要保留乙個空格，例如 width calc 100 10px 2.任何長度值都可以使用calc 函式進行計算 3.calc 函式支援 運算 4.calc 函式使用標準的數 算優先順序規則 calc是css3中的計算，ie10 瀏覽器支...
CSS3中 的 calc 函式
css3 的 calc 函式。這裡的意思是設定寬度比100 的寬度少30px。calc 函式用於動態計算長度值。calc 函式支援 運算 calc 函式使用標準的數 算優先順序規則 在less中使用以下樣式寬度計算錯誤 width calc 100 30px 計算出來是 width 70 分析 px...
css3中的calc的使用
最近在布局的時候遇到乙個問題，在頁面中的左側是側邊欄，右邊是內容區域，內容區域中有乙個固定定位的標籤頁，在設定固定定位的標籤設定寬度的時候應該是內容區域的寬度，而固定定位的時候相對於是視窗的寬度，所以轉換為了當前視窗的寬度減去左側的側邊欄的寬度 開始在網上查了查有個calc屬性是可以寫表示式的，但是...