这是一个会计算的属性，特别适合对于自适应还不是很熟练的童鞋
calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
以前我们可以使用box-sizing:border-box;来设置盒子的属性为不加上边距。现在我们又多了一个选择了。但要注意，两者只能使用一个哦，否则就会造成冲突了。
calc()可以使用数学运算中的简单加（+）、减（-）、乘（*）和除（/）来解决问题，而且还可以根据单位如px,em,rem和百分比来转化计算，但是要 注意，使用运算符号的时候要与两边的值有空格和间隙，否则不识别，会报错 ！
作者：Awen_Panda
链接：https://juejin.cn/post/6844903903532679181
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.demo{
width: 300px;
background:#60f;
padding: 3px 0;
}
.box{
background:#f60;
height: 50px;
padding:10px;
border: 5px solid green;
/*第一种写法*/
/*width: 100%;*/
/*box-sizing: border-box;*/
/*第二种写法*/
width: 90%;/*写给不支持calc()的浏览器*/
width: -moz-calc(100% - (10px + 5px ) * 2);
width: -webkit-calc(100% - (10px + 5px) * 2);
width: calc(100% - (10px + 5px) * 2);
}
</style>
</head>
<body>
<div class="demo">
<div class="box"></div>
</div>
</body>
</html>