less-calc()

calc() 只作用于属性值

不能在媒体查询中使用

/* 无效 */
@media (min-width: calc(40rem + 1px)) {
  /* Wider than 40rem */
}

与预处理器数学比较

.foot {
  width: calc(10px + 50px);
}
//组合不同单元; .foot元素总是小于它父元素宽度 50px;
//使用 calc()，计算值是表达式它自己，而非表达式的结果
.foot {
    width: calc(100% - 50px);
}

支持"+", “-”, “*”, "/"四则运算，又有区别

/*(+、-)要求这两个数都是长度*/
.foot {
 /* 有效 */
 margin: calc(100px + 100px);
 
  /* 无效 */
 margin: calc(10px + 5);
}
/*除法(/)要求第二个数字是无单位的*/
.foot {
 /* 有效的? */
 margin: calc(30px / 3);

 /* 无效的? */
 margin: calc(30px / 10px);
}
//乘法(*)要求其中一个数是无单位的。
.foot {
 /* 有效的 ? */
 margin: calc(10px * 3);

 /* 有效的 ? */
 margin: calc(3 * 10px);

 /* 无效的 ? */
 margin: calc(30px * 3px);
}
/*加法和减法要加前后空格,负数是可以的(例如 calc(5vw - -5px) )，但这是一个例子，说明空格不仅是必需的，而且是有用的*/
.foot {
 /* 有效的 ? */
 font-size: calc(3vw + 2px);

 /* 无效的 ? */
 font-size: calc(3vw+2px);

 /* 有效的 ? */
 font-size: calc(3vw - 2px);

 /* 无效的 ? */
 font-size: calc(3vw-2px);
}
//calc() 与开头括号之间没有空格。
.foot {
 /* 无效的 ? */
 width: calc (100% / 3);
}

可以嵌套

.foot {
   width: calc( 100% / calc(100px * 2) );
}

支持大多数浏览器，对于不支持的可以写后补

.foo {
   width: 90%; /* 浏览器不支持是启用*/
   width: calc(100% - 50px);
}