這篇文章主要介紹“css樣式中calc的含義是什么”，在日常操作中，相信很多人在css樣式中calc的含義是什么問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”css樣式中calc的含義是什么”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！

創(chuàng)新互聯(lián)專(zhuān)業(yè)為企業(yè)提供四平網(wǎng)站建設(shè)、四平做網(wǎng)站、四平網(wǎng)站設(shè)計(jì)、四平網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、四平企業(yè)網(wǎng)站模板建站服務(wù)，10多年四平做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

在css中，calc是計(jì)算的意思；calc可以理解為一個(gè)函數(shù)function，是calculate的縮寫(xiě)，用來(lái)指定一個(gè)元素的長(zhǎng)度，calc可以給元素做計(jì)算，使用指定的單位值計(jì)算出長(zhǎng)度值，語(yǔ)法為“元素{長(zhǎng)度屬性:calc(表達(dá)式)}”。

本教程操作環(huán)境：windows10系統(tǒng)、CSS3&&HTML5版本、Dell G3電腦。

css樣式中的calc是什么意思

calc()從字面我們可以把他理解為一個(gè)函數(shù)function。其實(shí)calc是英文單詞calculate(計(jì)算)的縮寫(xiě)，是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)”這種沒(méi)有空格的寫(xiě)法是錯(cuò)誤的；

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

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

 .elm {
    /*Firefox*/
    -moz-calc(expression);
    /*chrome safari*/
    -webkit-calc(expression);
    /*Standard */
    calc();
 }

通過(guò)上面的了解，大家對(duì)calc()不在那么陌生，但對(duì)于實(shí)際的運(yùn)用可能還是不太了解，那么大家就接下來(lái)跟我一起動(dòng)手，通過(guò)實(shí)例來(lái)了解他吧。首先我們來(lái)看一個(gè)最常用的實(shí)例：