CSS3中的calc()怎么用

這篇文章主要介紹了CSS3中的calc()怎么用的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS3中的calc()怎么用文章都會有所收獲，下面我們一起來看看吧。

    calc()是什么？

    calc()從字面我們可以把他理解為一個函數(shù)function。其實calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設(shè)置動態(tài)值。為何說是動態(tài)值呢?因為我們使用的表達(dá)式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。

    calc()能做什么？

    calc()能讓你給元素的做計算，你可以給一個div元素，使用百分比、em、px和rem單位值計算出其寬度或者高度，比如說“width:calc(50%+2em)”，這樣一來你就不用考慮元素DIV的寬度值到底是多少，而把這個煩人的任務(wù)交由瀏覽器去計算。

    calc()語法

    calc()語法非常簡單，就像我們小時候?qū)W加（+）、減（-）、乘（*）、除（/）一樣，使用數(shù)學(xué)表達(dá)式來表示：

    .elm{

    width:calc(expression);

    }

    其中"expression"是一個表達(dá)式，用來計算長度的表達(dá)式。

    calc()的運算規(guī)則

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

    1、使用“+”、“-”、“*”和“/”四則運算；

    2、可以使用百分比、px、em、rem等單位；

    3、可以混合使用各種單位進(jìn)行計算；

    4、表達(dá)式中有“+”和“-”時，其前后必須要有空格，如"widht:calc(12%+5em)"這種沒有空格的寫法是錯誤的；

    5、表達(dá)式中有“*”和“/”時，其前后可以沒有空格，但建議留有空格。

    瀏覽器的兼容性

    瀏覽器對calc()的兼容性還算不錯，在IE9+、FF4.0+、Chrome19+、Safari6+都得到較好支持，同樣需要在其前面加上各瀏覽器廠商的識別符，不過可惜的是，移動端的瀏覽器還沒僅有“firefoxforandroid14.0”支持，其他的全軍覆沒。

    大家在實際使用時，同樣需要添加瀏覽器的前綴

    .elm{

    /*Firefox*/

    -moz-calc(expression);

    /*chromesafari*/

    -webkit-calc(expression);

    /*Standard*/

    calc();

    }

    .box{

    background:#f60;

    height:50px;

    padding:10px;

    border:5pxsolidgreen;

    width:90%;/*寫給不支持calc()的瀏覽器*/

    width:-moz-calc(100%-(10px+5px)*2);

    width:-webkit-calc(100%-(10px+5px)*2);

    width:calc(100%-(10px+5px)*2);

    }

    值得注意的一點是，在calc函數(shù)里面運算符兩側(cè)必須各保留一個空格，否則函數(shù)會報錯。

關(guān)于“CSS3中的calc()怎么用”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“CSS3中的calc()怎么用”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。