CSS3中的calc()怎么用

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

專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計、做網(wǎng)站服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)烏達免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

calc()是什么？

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

calc()能做什么？

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

calc()語法

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

.elm{

width:calc(expression);

}

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

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

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

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

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

3、可以混合使用各種單位進行計算；

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

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

瀏覽器的兼容性

瀏覽器對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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享文章：CSS3中的calc()怎么用
分享URL：http://muchs.cn/article0/ihigoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、品牌網(wǎng)站建設(shè)、網(wǎng)站維護、網(wǎng)站建設(shè)、ChatGPT、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容