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

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

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

calc()是干嘛的？

calc()是單詞calculate(計(jì)算)的縮寫(xiě)，是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)容到剪貼板

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

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

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

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

寬度，10em加20px。

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

.box{ margin-left:20px; width:calc(100%/3-20px); }
.box:nth-child(3n){ margin-left:0; }

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

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

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

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)則不是必須的。

然后我們可能要這樣寫(xiě)：

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

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

這樣寫(xiě)也是可以的：

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

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

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

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

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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

網(wǎng)頁(yè)標(biāo)題：CSS3中怎么實(shí)現(xiàn)calc()功能
本文網(wǎng)址：http://muchs.cn/article6/jpdhig.html

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

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

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