css3之calc（）

在使用calc（）之前，我也只是听说有这么一个东西，但在用过之后我才发现这个功能其实很实用。
calc()其实就是英文calculate(计算)的缩写，它看起来像个函数吧？其实不是，calc()是css3中的一个属性。

什么是calc()？

使用calc()我们可以动态的来指定元素的长度，我们可以用它给元素的border、margin、pading、font-size和width等属性设置动态值。
为何它是动态的？因为它是通过计算来决定属性的长度的。

calc()的语法

就像它全称calculate(计算)所说的，就是加 （+）、减（-）、乘（*）、除（/）。

怎么写？我举个例子：

.box {
  width: calc(100% - 10px);
}

这样的话类名为box的类标签，它的宽度就是父元素宽度的100%减去10px，这是一个动态的属性。

实例

我是在工作中遇到这个问题的，情况是这样：
一个div中有左右两个div，但是两个div中有一条中线，我想一般都是用border解决吧！但是因为div的宽度各占50%，在添加了borer之后，两个div的总宽度为50%+50%+1px=100%+1px。
如下图所示：

我们的总宽度超过父元素的总宽度了QAQ！所以.div-right被无情的挤了下来。就会变成这样：

红色代表中间的中线

我们来用calc()把.box-right放上去吧！代码如下：

.div-r{
        float: left;
        width: calc(50% - 1px);
        height: 100%;
        border-left:1px solid red;
        background: #FFB86C;
    }

这样我们就把两个div放进.box了，并且中间成功的放进了一条分割线。╰( ´︶`)╯

注意事项

在使用的过程中有一些注意事项：

1、运算符号的左右两边要有空格分开，如calc(50% - 1px);
　 乘号和除号可以不要加空格，但是建议加上比较好。

2、考虑到兼容问题，我们还可以加上这些：

 　　width:-moz-calc(40% - 1px); 
　　 width:-webkit-calc(40% - 1px); 
　　 width:calc(40% - 1px);