四则运算calc()

说明

用于动态计算长度值。（需要注意的是，运算符前后都需要留一个空格，例如：calc(100% - 20px);）

clac()是什么

首先calc()是什么，calc是英文单词calculate（计算）的缩写。它在css3参考手册中，属于函数一栏，所以你可以把它理解为一个函数，括号里面是它的表达式。它可以计算任何的长度值。其次它是动态的计算的，所以不同单位之间的运算它也可以运算，例如：calc(10rem - 1px);

calc()可以做什么

理解了calc是什么，那么在什么情况下运用它，它能做到什么，就显而易见了，在流体布局中，其中一个元素有了长度，其中一个元素并没有固定的长度，他要根据窗口的大小，或者其他的因素需要计算此时的长度，它轻易的就能实现你的动态布局。

calc()运算规则

calc()函数支持'+'、'-'、'*'、'/'运算，其次，calc()函数使用标准的数学运算优先级规则，并且支持不同单位之间的运算，例如100%, rem, px。注意使用时，运算符'+'、'-'前后必须留空格，其他运算建议留空格。另外在react中，必须在表达式前加上"~"。例如calc: (~"100% - 10px");

calc()浏览器兼容

如下图：

大家使用时，同样需要加上浏览器的前缀，不要留坑

安卓UC浏览器不支持calc属性

示例

我出贴出我在实际项目中的样式，供大家参考

这个场景是头部有固定的高度，但是内容部分的是根据窗口的大小来的，这样我就能实现一个简单的动态布局

参考文献：css3参考手册

（第一次写这种文章，可能写得不够仔细，不够全面，如果有任何意见或者建议给我，我会继续完善它的，希望看到的人能够对你有所帮助）

作者：超爱吃小龙虾
链接：https://www.jianshu.com/p/31c7de7f8064