CSS3中 的 calc() 函数

目的是动态改变宽度/高度的变化，适配问题

css3 的 calc()函数。这里的意思是设置宽度比100%的宽度少30px。
calc()函数用于动态计算长度值。
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则； 

注意 :  运算符"+ - * /"左右两边均要留空格 

   在less中使用以下样式宽度计算错误: 

width: calc(100% - 30px); 

计算出来是:width: 70%;  

分析 :   px也被解析成%进行了运算，这个的原因是calc属性在less下解析时会忽略运算的单位，统一使用第一个数值的单位（注意：很多文章上写的是按照百分比处理，这个说法是不正确的, 例如将100%换为100em，最终的结果是21em）

解决方法:

1、width: calc(~"100% - 30px");

"~"是less语法中的转义字符，允许你使用任意字符串作为属性或变量值。所以不会进行计算，将最终的计算交给了calc

2、width: e("calc(100% - 30px)");

"e"是一个方法，也是less中提供的。功能其实也是转义，接收一个字符串，返回一个不经任何处理的字符串，也是将最终的计算交给了calc

 

参考文章:https://blog.csdn.net/qq8241994/article/details/108010648