什么是calc()?

學(xué)習(xí)calc()之前，我們有必要先知道calc()是什么？只有知道了他是個(gè)什么東東？在實(shí)際運(yùn)用中更好的使用他。

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

calc()能做什么？

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

calc()語(yǔ)法

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

.elm {width: calc(expression); }

其中"expression"是一個(gè)表達(dá)式，用來(lái)計(jì)算長(zhǎng)度的表達(dá)式。

calc()的運(yùn)算規(guī)則

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

使用“+”、“-”、“*” 和 “/”四則運(yùn)算；

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

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

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

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

瀏覽器的兼容性

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

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

.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); }

值得注意的一點(diǎn)是，在calc函數(shù)里面運(yùn)算符兩側(cè)必須各保留一個(gè)空格，否則函數(shù)會(huì)報(bào)錯(cuò)

轉(zhuǎn)載于:https://www.cnblogs.com/gopark/p/9455687.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的CSS3的calc()使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。