calc() 函數用於動態計算長度值。
需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
任何長度值都可以使用calc()函數進行計算；
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標准的數學運算優先級規則；
注意：
width:calc(100%-100px);——無法起作用
width:calc(100% - 100px);——可以使用了
calc()計算中的兩個值必須同運算符號之間存在空格，否則不會起作用
解決在less中無法正確計算的問題 加~
width:calc(~"100% - 100px") 有時候%也不會起作用可以用vh代替即：
width:calc(~"100vh - 100px")
在講calc之前先說一下 vh vw： vw 相對於視口的寬度。視口被均分為100單位的vw vh 相對於視口的高度。視口被均分為100單位的vh vmax 相對於視口的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax vmin 相對於視口的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin
calc(100vh - 10px) 表示整個瀏覽器窗口高度減去10px的大小 calc(100vw - 10px) 表示整個瀏覽器窗口寬度減去10px的大小