之前,我們想要實現一個完美的寬度自適應的輸入框好麻煩,曾經也被作為對前端技術的一個挑戰。類似的常見場景還有100%寬+邊框的容器等。遇到這些情況,我們不得不分外小心,因為各個瀏覽器的表現可能不一致。
現在,firefox和webkit相繼支持calc()功能了,我們也可以學習下了。
calc()是干嘛的?
calc()是單詞calculate(計算)的縮寫,是css3的一個新的長度單位功能,可以使用簡單的數學運算。
嗯,CSS3越來越高級了。
運算規則
calc()使用通用的數學運算規則,但是也提供更智能的功能:
使用“+”“-”“*”“/”四則運算;
可以使用百分比、px、em、rem等單位;
可以混合使用各種單位進行計算。
實例:
我們來看幾個小例子來理解下calc()功能吧:
新聞熱點
疑難解答