css3之calc（）
初识calc()
在使用calc（）之前，我也只是听说有这么一个东西，但在用过之后我才发现这个功能其实很实用。
calc()其实就是英文calculate(计算)的缩写，它看起来像个函数吧？
其实不是，calc()是css3中的一个属性
什么是calc()？
使用calc()我们可以动态的来指定元素的长度，我们可以用它给元素的border、margin、pading、font-size和width等属性设置动态值。
为何它是动态的？因为它是通过计算来决定属性的长度的。
就像它全称calculate(计算)所说的，就是加 （+）、减（-）、乘（*）、除（/）。
怎么写？我举个例子：
.box {
width: calc(100%-10px);
}
这样的话类名为box的类标签，它的宽度就是父元素宽度的100%减去10px，这是一个动态的属性。
我是在工作中遇到这个问题的，情况是这样：
html:
<div class="box">
<div class="box-left"></div>
<div class="box-right"></div>
</div>
css:
.box{
width:100px;
height:200px;
}
.box-left{
width:50%;
height:100%;
border-right:1px solid black;
}
.box-right{
width:50%;
height:100%;
}
一个div中有左右两个div，但是两个div中有一条中线，我想一般都是用border解决吧！但是因为div的宽度各占50%，在添加了borer之后，两个div的总宽度为50%+50%+1px=100%+1px。
我们的总宽度超过父元素的总宽度了QAQ！所以.div-right被无情的挤了下来。
我们来用calc()把.box-right放上去吧！代码如下：
.box-left{
width:calc(50% - 1px);
height:100%;
border-right:1px solid black;
}
这样我们就把两个div放进.box了，并且中间成功的放进了一条分割线。╰(*´︶`*)╯
在使用的过程中有一些注意事项：
1、运算符号的左右两边要有空格分开，如calc(50% - 1px);
乘号和除号可以不要加空格，但是建议加上比较好。
2、考虑到兼容问题，我们还可以加上这些：
width:-moz-calc(40% - 1px);
width:-webkit-calc(40% - 1px);
width:calc(40% - 1px);
