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}");
　　}

搞定！