CSS3中怎么實(shí)現(xiàn)calc()功能

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

calc()是干嘛的？

calc()是單詞calculate(計(jì)算)的縮寫，是css3的一個(gè)新的長(zhǎng)度單位功能，可以使用簡(jiǎn)單的數(shù)學(xué)運(yùn)算。

嗯，CSS3越來(lái)越高級(jí)了。
運(yùn)算規(guī)則

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

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

實(shí)例：

我們來(lái)看幾個(gè)小例子來(lái)理解下calc()功能吧：

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

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

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

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

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

寬度，10em加20px。

CSS Code復(fù)制內(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()功能，不過(guò)要使用-moz-calc()私有屬性，chrome從19 dev版，也開始支持私有的-webkit-calc()寫法，IE9這次則牛逼了一次，原生支持標(biāo)準(zhǔn)的不帶前綴的寫法了。Opera貌似還不支持～～

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

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

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

也就是說(shuō)，”+”、”-“兩個(gè)符號(hào)邊上必須要有空格，而”*”、”/”符號(hào)則不是必須的。

然后我們可能要這樣寫：

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

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

這樣寫也是可以的：

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

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

但是這樣寫就是錯(cuò)的：

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

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

看完上述內(nèi)容，你們對(duì)CSS3中怎么實(shí)現(xiàn)calc()功能有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。