我们在设置元素的宽高是经常用到像素（px）,百分比（%），calc也常用于width、height的设置中。那么calc到底是什么呢？其主要用途又是什么？
calc的定义：
calc:可以理解为一个函数，用于动态计算元素长度值。用一个表达式作为参数，表达式的结果作为值。主要用于计算不确定值。
与其他单位的区别
1：静态像素值
如把div的宽度设置为50px，我们可以直接利用静态像素这样设置
div{
width:50px;
}
但如果我想设置div的宽度为屏幕的宽度减去100px呢，这里既要考虑屏幕的宽度，还要进行相减操作，当然用js肯定可以计算出来，但css3提供了更简洁的方式，没错，就是calc
div{
width:100vm - 100px;
}
这里需要注意的是：+ - 运算符的前后必须有空白字符，* / 运算符前后不需要空白字符，但为了一致性，都加上，乘数中至少有一个是 < number>，除法中除数必须是< number>,表达式中的运算对象可以使用任意< length >值
2：与sass中变量的计算 如在sass中可以这样进行计算
$width1:100px
div{
width:$widht1+100px;
}
与上面用calc方式写的代码能直接看出：calc 更灵活，可以组合不同的单位（px,rem,em,%,vm等）,这样一来你就不用考虑元素DIV的宽度值到底是多少，而把这个烦人的任务交由浏览器去计算。其次，浏览器的解析也是不一样的，如果用sass写，那么上面的sass代码经过编号后，会成为
div{
width:200px;
}
而用calc的方式写的，浏览器的解析值是表达式本身，而不是表达式的结果值，你可以通过F12审查元素看到其样式的宽度还是该表达式。
calc的使用场景
1：上面提到的，动态计算元素的宽高值
2：清晰度
如：设置一个div的宽度为父容器的1/6，可能你会百分比直接这样设置
div{
width:16.66667%;
}
而calc更加清晰，并具有可读性
div{
width:calc(100% / 6)
}
3:创建根栅格尺寸
使用rem和calc可以创建一个基于视口的栅格：我们可以设置根元素的字体大小为视口宽度的一部分：
html{
font-size:calc(100vm / 30)
}
现在1rem的大小为视口宽度的1/30,相同比例的视口总会显示相同文本的数量。
css中的单位
在上面，我们已经看到calc和不同单位的混用，如
相对单位：%，em，rem 视口比例单位（即相对于viewport的大小的值，即文档的可见部分）：vm，vh，vmin:视口高度 vh 和宽度 vw 两者之间的最小值，vmax:视口高度 vh 和宽度 vw 两者之间的最大值。1vw = 视口宽度的1%
