今天就跟大家聊聊有關(guān)CSS3中怎么實現(xiàn)calc()功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了通川免費建站歡迎大家使用！

calc()是干嘛的？

calc()是單詞calculate(計算)的縮寫，是css3的一個新的長度單位功能，可以使用簡單的數(shù)學運算。

嗯，CSS3越來越高級了。
運算規(guī)則

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

    使用“+”“-”“*”“/”四則運算；
    可以使用百分比、px、em、rem等單位；
    可以混合使用各種單位進行計算。

實例：

我們來看幾個小例子來理解下calc()功能吧：

CSS Code復制內(nèi)容到剪貼板

1. .box{ border:1px solid #ddd; width:calc(100%-2px) }  

容器寬度加上邊框?qū)挾日?00%。

CSS Code復制內(nèi)容到剪貼板

1. .box{ width:calc(10em+20px) }  

寬度，10em加20px。

CSS Code復制內(nèi)容到剪貼板

1. .box{ margin-left:20px; width:calc(100%/3-20px); }    

2. .box:nth-child(3n){ margin-left:0; }  

3欄等寬布局。
瀏覽器支持

firefox 4.0+已經(jīng)開支支持calc()功能，不過要使用-moz-calc()私有屬性，chrome從19 dev版，也開始支持私有的-webkit-calc()寫法，IE9這次則牛逼了一次，原生支持標準的不帶前綴的寫法了。Opera貌似還不支持～～

所以如果我們要用這個屬性的話，要記得帶上各瀏覽器的兼容性。

eric meyer提到w3c規(guī)范的一條備注(評論里面的同學也有提到)：

    Note that the grammar requires spaces around binary ‘+’ and ‘-’ operators. The ‘*’ and ‘/’ operators do not require spaces. via CSS3 Values and Units specification

也就是說，”+”、”-“兩個符號邊上必須要有空格，而”*”、”/”符號則不是必須的。

然后我們可能要這樣寫：

CSS Code復制內(nèi)容到剪貼板

1. width: calc(100%/3 - 2*1em - 2*1px);  

這樣寫也是可以的：

CSS Code復制內(nèi)容到剪貼板

1. width: calc(100% / 3 - 2 * 1em - 2 * 1px);  

但是這樣寫就是錯的：

CSS Code復制內(nèi)容到剪貼板

1. width: calc(100%/3-2*1em-2*1px);  

看完上述內(nèi)容，你們對CSS3中怎么實現(xiàn)calc()功能有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)頁標題：CSS3中怎么實現(xiàn)calc()功能
本文網(wǎng)址：http://jinyejixie.com/article6/jpdhig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站設(shè)計公司、外貿(mào)建站、移動網(wǎng)站建設(shè)、虛擬主機、響應式網(wǎng)站

廣告

聲明：本網(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)