CSS3中的calc()是什麼？ calc()怎麼使用呢？

很多人都不知道calc()是什麼，那今天就來學習calc()，學習之前我們有必要先知道calc()是什麼？只有知道他是什麼東西了？在實際運用上才能更好的使用他。那接下來就圍繞著calc()展開。

calc()是什麼？

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

calc()能做什麼？

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

calc()語法

calc()文法非常簡單，就像我們小時候學加（ ）、減（-）、乘（*）、除（ /）一樣，使用數學表達式來表示：

.elm {
  width: calc(expression);
}

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

calc()的運算規則

calc()使用通用的數學運算規則，但也提供更聰明的功能：
1、使用“ ” 、「-」、「*」 和「/」四則運算；
2、可以使用百分比、px、em、rem等單位；
3、可以混合使用各種單位進行計算；
4 、表達式中有「 」和「-」時，其前後必須要有空格，如"widht: calc(12% 5em)"這種沒有空格的寫法是錯誤的；
5、表達式中有「*」和「/」時，其前後可以沒有空格，但建議留有空格。

瀏覽器的相容性

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

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

 .elm {
    /*Firefox*/
    -moz-calc(expression);
    /*chrome safari*/
    -webkit-calc(expression);
    /*Standard */
    calc();
 }

.box {
    background: #f60;
    height: 50px;
    padding: 10px;
    border: 5px solid green;
width: 90%;/*写给不支持calc()的浏览器*/
    width:-moz-calc(100% - (10px + 5px) * 2);
    width:-webkit-calc(100% - (10px + 5px) * 2);
    width: calc(100% - (10px + 5px) * 2);
}

值得注意的一點是，在calc函數裡面運算子兩側必須各保留一個空格，否則函數會報錯。

以上是CSS3中的calc()是什麼？ calc()怎麼使用呢？的詳細內容。更多資訊請關注PHP中文網其他相關文章！