這篇文章將為大家詳細(xì)講解有關(guān)CSS中calc()函數(shù)如何使用，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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

CSS的calc函數(shù)是一個(gè)可以使用計(jì)算公式進(jìn)行布局和設(shè)置大小規(guī)范的函數(shù)。

通常設(shè)置布局和大小，都是如100px和3em這樣來(lái)設(shè)置的，但你可以通過(guò)calc函數(shù)使用100px + 50px或3em - 1em等進(jìn)行算術(shù)運(yùn)算來(lái)設(shè)置。

首先我們來(lái)看看如何使用calc()函數(shù)？

我們使用calc函數(shù)都是通過(guò)指定計(jì)算公式來(lái)設(shè)置大小，比如：

width: calc(100px + 50px);

或者

font-size: calc(3em + 1em);

我們下面來(lái)看具體的示例

代碼如下

創(chuàng)建calc.html并編寫(xiě)以下HTML文件

  
    
    
    
  
  
    

      這是一個(gè)未使用calc的div。
    
    

      這是一個(gè)使用了calc的div。
    
    

     這是設(shè)置了3em的div
    
    

      這是一個(gè)設(shè)置了calc(3em+2em)的div
    
  

以上代碼在瀏覽器中顯示效果如下

關(guān)于CSS中calc()函數(shù)如何使用就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。