大家可以在MDN中查看比较详细的解释
先说下最容易忘得一点是：操作符前后一定要留一个空格，不然是无效的！！！
calc()是CSS允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<percentage>、<number>、或 <integer>。
语法如下：
/* property: calc(expression) */
width: calc(100% - 80px);
calc() 函数用一个表达式作为它的参数，用这个表达式的结果作为值。这个表达式可以是任何如下操作符的组合，采用标准操作符处理法则的简单表达式。
+，-，，/ （加减乘除） 其中乘中必须有一个是number(数字）的类型的；/除的右边也必须是number类型的
备注
+和-运算符的两边必须要有空白字符。比如，calc(50% -8px)会被解析成为一个无效的表达式，解析结果是：一个百分比 后跟一个负数长度值。而加有空白字符的、有效的表达式calc(8px + -50%)会被解析成为：一个长度 后跟一个加号 再跟一个负百分比。*和/这两个运算符前后不需要空白字符，但如果考虑到统一性，仍然推荐加上空白符。- 用 0 作除数会使 HTML 解析器抛出异常。
- 涉及自动布局和固定布局的表格中的表列、表列组、表行、表行组和表单元格的宽度和高度百分比的数学表达式，
auto可视为已指定。 calc()函数支持嵌套，但支持的方式是：把被嵌套的calc()函数全当成普通的括号。
定义一个盒子,让其保持宽度为视图-100px的宽度
<div id="box">我是一个盒子</div>
样式如下：
#box{
/* width:calc(100vw - 100px); */
width:calc(100% - 100px); //减号两边都有一个空格
background-color:red;
text-align:center;
box-sizing: border-box;
position: relative;
left:50px;
}
在定义一个盒子，里面包含一个子盒子；宽度是视图宽度的1/3，让其子盒子的宽度是容器的宽度-10px
<div id="box">
<div class="box-item">我是子盒子</div>
</div>
样式如下：
#box{
width:calc(100% / 3);
margin-right:10px;
border:1px solid #ccc;
padding:10px;
}
.box-item{
width:calc(100% - 10px);
border: 1px solid red;
}
效果图如下：
