初识calc()

在使用calc（）之前，我也只是听说有这么一个东西，但在用过之后我才发现这个功能其实很实用。

calc()其实就是英文calculate(计算)的缩写，它看起来像个函数吧？

其实不是，calc()是css3中的一个属性

什么是calc()？

使用calc()我们可以动态的来指定元素的长度，我们可以用它给元素的border、margin、pading、font-size和width等属性设置动态值。

为何它是动态的？因为它是通过计算来决定属性的长度的。

calc()的语法

就像它全称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);