Css3新属性：calc()

一、前言

　　calc()看起来像是javascript中的一个函数，而事实上它是用在Css中的，可以用它来计算长度（宽度或高度)，能够自动根据不同尺寸的屏幕自动调接数值，从而很轻松的实现自适应布局展示在不同尺寸屏幕下。项目中常常碰到要始终居中的元素，当然想到的第一个就是使用margin：0 auto；或者使用定位和margin结合的这种简单的方法，当同事告诉我让我去研究研究calc的时候才真正的深入了解这个Css3中的新东西。

 

二、使用方法

　　calc()中的参数是一个计算公式，通过这个计算公式把计算宽度和数值的任务扔给不同尺寸下的浏览器，让页面能够自己得出宽度或数值的结论，这些计算公式也都是很简单的加( )减( - )乘( * )除( / )运算。

div{
    width: calc(15px   15px);//30px
    width: calc(15px - 10px);//5px
    width: calc(15px*2);//30px
    width: calc(15px/3);//5px
}

　　从上面的例子中可以看出，加( )减( - )运算中需要计算的数值与运算符之间是有空格的，并且这空格是不能省略的，而乘( * )除( / )运算里的空格是可以省略的。

　　calc()中的表达式是可以使用百分比、px、em、rem等单位进行计算的，并且单位可以混在一起计算：

div{
    width: calc(3em   5px);//53px
}

 

三、calc()嵌套

　　calc()是一个函数，那么函数是可以支持嵌套的，可以通过不同的公式来算出最后的结果。

div{
    --widthA: calc(10px   190px);
    --widthB: calc(var(--widthA) / 2);
    --widthC: calc(var(--widthB) / 2);
    width: var(--widthC);//50px
}

 

四、简单的居中

　　calc()可以计算宽度以后，居中显示的实现就可以有很多方法，padding或者margin，但它的原理都是一样的。

div{
    padding: 0 calc((100% - 1024px)/2);
}

　　假设中间的内容是固定宽度1024px，那么获取父级的宽度或者窗口的宽度100%，然后减去内容的宽度后剩下的就是需要分配给内容左右两边的宽度，将它们一分为二（/2）就可以实现中间1024px宽度的内容一直居中了。

 

五、兼容性

　　calc()的兼容性已经很高了，IE9 、FF4.0 、Chrome和Safari6 都已经支持calc()的应用，但还是要加上不同浏览器的前缀。

div{
    -moz-calc(expression);
    -webkit-calc(expression);
    calc(expression);
　　 //expression为计算公式
}