1.解释：calc() 是一个css 函数，他可以计算一个元素的宽度高度值，功能主要用于计算。
2.使用方法：
calc(expression),expression 是可以用 ＋ － ＊ ／符号进行计算的
如：calc(100% - 80px)； 注： 100 、80 与符号之间需要空格
举个例子：
html:
<div class="main">
<div class="box"></div>
</div>
css:
.main{
width:500px;
background:#ccc;
}
.box{
height:200px;
background:#f60
}
css 新增:
.main{
width:500px;
padding:5px;
background:#ccc;
}
.box{
height:200px;
width:100%;
background:#f60;
padding:10px;
border:5px solid #f40;
}
3.为了解决里面盒子 超出父类盒子的问题，我们使用calc 函数
.main{
width:500px;
padding:5px;
background:#ccc;
}
.box{
height:200px;
background:#f60;
padding:10px;
border:5px solid #f40;
width:90%;//是考虑到不兼容calc 的浏览器处理方式根据项目自己定义
width:calc(100% - 30px);
width:-webkit-calc(100% - 30px);
}
解析一下：calc(100% - 30px), 子类盒子有 5px 的 border 两边加一起就是10px;pading:10px; 两边加一起就是20px,
可以换成这样：calc(100% - (5px + 10px) * 2);