css3 calc()方法详解

今天又请教了到了一个之前自己没有用到过得知识~~calc()    希望每一个在学前端的路上都能遇到一个带着跑起来的大神（不求飞，只求踏踏实实一点一滴积累）渴求学习新知识的人，就寻求一个能够指导交流，共同进步的同伴吧！

我们在涉及移动端布局的时候上篇讲到box-sizing的用法。但它可能会影响到其他布局。

此处的calc相比来讲，要简单的多。你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。不过calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度，实现自适应宽度。

calc其实是calculate 计算 的缩写形式

calc() 函数用于动态计算长度值。

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算；
• calc()函数支持 "+", "-", "*", "/" 运算；
• calc()函数使用标准的数学运算优先级规则；
• 可以使用百分比、px、em、rem等单位；

用法：

width: calc(表达式)

例子：

body{
            font-size: 32px;
            background-color: aqua;
        }
        .box{
            position: absolute;
            width: calc(100% - 120px);
            padding: 10px;
            margin: 20px;
            text-align: center;
            border: 20px solid skyblue;
            background-color: pink;
}

需要注意的是120px = （margin + padding + border）* 2 + 'position'两边总和，可以发现剩余空间并不是平均分配

去掉position：absolute 值得注意的是中间部分宽度反而变窄了。

呈现效果没多大影响

所以，我们在设计的时候，表达式中不要有多余的值。

 

如果有浏览器兼容性问题，可以通过添加前缀：

.elm {
	/*Firefox*/
	-moz-calc(expression);
	/*chrome safari*/
	-webkit-calc(expression);
	/*Standard */
	calc();
 }