持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情
前言
自从入门前端后，大部分时间都在搞js，而css仅限于满足日常排版所需，并没有进行深入研究或者说是继续学习。开发中常用到calc()这个css函数来计算div的宽度或高度，功能强大且方便，希望这篇文章可以帮助大家更好的理解和使用calc()函数
定义与用法
calc() 函数用于动态计算长度值。
- 需要注意的是，运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)； - 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 "+", "-", "*", "/" 运算；
- calc()函数使用标准的数学运算优先级规则；
应用
场景1：
标准盒模型下，当元素设置100%时，添加border或padding，会将外层容器撑爆
通常我们会根据添加的border或padding宽度给.box一个固定宽度
// 设置.box 宽度为 400-10×2-5×2 = 370px
.box{
width: 370px;
height: 200px;
background-color: #ECAD9E;
padding: 10px;
border: 5px solid #5588aa;
}
使用calc()我们会省去很多计算，直接将计算过程交给浏览器
.box{
width: calc(100% - 10*2 -5*2);
height: 200px;
background-color: #ECAD9E;
padding: 10px;
border: 5px solid #5588aa;
}
场景2：
做一些有导航栏或侧边栏的项目，内容区自适应可以使用calc()函数，减去导航栏或侧边栏的宽度或高度
场景3：
实现元素垂直居中，原理同使用负外边距移动自身距离宽与高的一半，使用calc() 这样实现
div{
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px)
}
相当于
div{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}
场景4：
当页面布局中三个盒子充满100%宽度时，我们宽度可能会设置成33.3333%，尽可能的相加等于100，使用calc()可以完美解决，并且更具语义化
div{
width: calc(100% / 3)
}
场景5：
使用rem，calc() 函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小为视口宽度的一部分
html {
font-size: calc(100vw / 30);
}
现在,1rem 为视口宽度的 1/30。在页面上的任何文本，将会根据你的视口自动缩放。更进一步，相同比例的视口总会显示相同的文本数量，不管视口的真实尺寸是多少
兼容性
calc()已经得到普遍支持，对于不支持calc()的浏览器，我们可以使用一个固定值作为代替
div{
width: 80%; /* 给不支持的浏览器设置的值，不支持 calc() 的浏览器下一行会被会略 */
width: calc(100% - 240px)
}
总结
calc()函数 %，px，vh/vm 都可参与计算，可以利用其灵活强大的特性做很多事情，希望简单的举例可以帮助大家。
css目前为止有86个函数，像calc()一样强大的函数还有很多，继续学习，继续捣鼓
