前言

最近項(xiàng)目中遇到calc()方法不生效問(wèn)題，本著究其所以然的想法，徹底查了一下calc的方法及使用，還有為什么項(xiàng)目中使用不生效的問(wèn)題，最后總結(jié)出此文，解決方法放在結(jié)尾了

cale()是什么

calc是英文單詞calculate的縮寫，其實(shí)主要用于對(duì)項(xiàng)目中一些單位的計(jì)算，這里的計(jì)算是在calc()函數(shù)里面填充表達(dá)式去計(jì)算，它會(huì)返回具體的值

基本使用

平常我們項(xiàng)目中遇到最多的就是一些普通計(jì)算了比如：

這里計(jì)算出來(lái)的就是頁(yè)面減去32像素單位的高度，如果父盒子有高度，這個(gè)100%就是繼承父盒子的高度

除了加減法calc()還支持乘除，乘除法要求必須要有一個(gè)參數(shù)是數(shù)字，而且除法的右邊參數(shù)必須是數(shù)字;加、減、乘、除('+'、'-'、'*'、'/'、)，乘除法的運(yùn)算規(guī)則也是一樣的會(huì)先運(yùn)算乘除再算加減，所以我們不需要刻意的使用括號(hào)去包裹，但是如果你是需要先運(yùn)算加減則要先用括號(hào)進(jìn)行包裹

靈活使用

calc()除了這些用法還有一些比較靈活用法：

還有比如我這篇旋轉(zhuǎn)方塊里面的每一個(gè)點(diǎn)的旋轉(zhuǎn)用到的就是css中的自定義屬性來(lái)運(yùn)算，運(yùn)用style中的--i屬性來(lái)控制變量，從而減少我們大量的css去計(jì)算的代碼

js復(fù)制代碼transform: rotate(calc(30deg * var(--i)));

而且calc()還支持混合單位運(yùn)算，在參數(shù)單位不同時(shí)，會(huì)做預(yù)處理比如：

transform: rotate(calc(30deg * var(--i)));

而且calc()支持很多單位：'px，%，em，rem，vw，vh，cm，pt，pc，vmin，vmax，vh'等

注意

calc()表達(dá)式的參數(shù)一定要用空格隔開，并且也是支持負(fù)數(shù)計(jì)算的，而且calc()不支持媒體查詢哦！！

兼容性

——————————————————————————
原文鏈接：https://juejin.cn/post/7218840231856111673