calc() 計算CSS屬性值

calc()是css3的一個新增的功能，用來指定元素的長度。好比說，你能夠使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。calc()最大的好處就是用在流體佈局上，能夠經過calc()計算獲得元素的寬度。

calc(）語法：

加 （+）、減（-）、乘（*）、除（/），注意的是：乘數中至少要有一個是 <number> 類型的、被除數（/右面的數）必須是 <number> 類型的

calc()的運算規則
calc()使用通用的數學運算規則，可是也提供更智能的功能：

1. 使用「+」、「-」、「*」 和 「/」四則運算；
2. 能夠使用百分比、px、em、rem等單位；
3. 能夠混合使用各類單位進行計算；
4. 表達式中有「+」和「-」時，其先後必需要有空格，如」widht: calc(100% + 5px)」；
5. 表達式中有「*」和「/」時，其先後能夠沒有空格，但建議留有空格。

calc()在less文件中的坑：

在Less里加入calc時確發現了有點問題，我在Less中這麼寫：

div {width : calc(100% - 250px);} 

結果Less把這個當成運算式去執行了，結果給我解析成這樣：

div{width: calc(-150%);}

頓時懵逼，後來各類查度娘，才知道是因爲less的計算方式跟calc方法有重疊，二者在一塊兒有衝突，因而，在Less中把calc的寫法改寫成下面這樣：

div {width: calc(~"100% - 250px");}

順利經過編譯

而當250px是一個變量的時候，要這樣寫：

div {　　@diff : 250px;　　width : calc(~"100% - @{diff}");　　}