关于calc 属性解析

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);