4. css，less中使用calc函数

CSS calc()函数

.content {
  width: calc(100% - 20px);
  padding: 0 10px;
  background: #ccc;
}

用法：

1. calc()函数支持 “+”, “-”, “*”, “/” 运算，使用标准的数学运算优先级规则
2. “+” 和 “-” 运算符前后需保留一个空格,如：width: calc(100% - 20px)，而 ”*“ 和 ”/“ 不需要空格

兼容性：

查看兼容性

less中使用calc：

width: calc(~"100% - 20px")

因为less的运算方式和calc发送了冲突,所以比如calc(100% - 20px)会被编译成calc(80%)，解决方法就是calc(~“100% - 20px”)