一、前言
calc()看起来像是javascript中的一个函数，而事实上它是用在Css中的，可以用它来计算长度（宽度或高度)，能够自动根据不同尺寸的屏幕自动调接数值，从而很轻松的实现自适应布局展示在不同尺寸屏幕下。项目中常常碰到要始终居中的元素，当然想到的第一个就是使用margin：0 auto；或者使用定位和margin结合的这种简单的方法，当同事告诉我让我去研究研究calc的时候才真正的深入了解这个Css3中的新东西。
二、使用方法
calc()中的参数是一个计算公式，通过这个计算公式把计算宽度和数值的任务扔给不同尺寸下的浏览器，让页面能够自己得出宽度或数值的结论，这些计算公式也都是很简单的加( + )减( - )乘( * )除( / )运算。
p{
width: calc(15px + 15px);//30px
width: calc(15px - 10px);//5px
width: calc(15px*2);//30px
width: calc(15px/3);//5px}从上面的例子中可以看出，加( + )减( - )运算中需要计算的数值与运算符之间是有空格的，并且这空格是不能省略的，而乘( * )除( / )运算里的空格是可以省略的。
立即学习“前端免费学习笔记（深入）”；
calc()中的表达式是可以使用百分比、px、em、rem等单位进行计算的，并且单位可以混在一起计算：
p{
width: calc(3em + 5px);//53px}三、calc()嵌套
睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产
calc()是一个函数，那么函数是可以支持嵌套的，可以通过不同的公式来算出最后的结果。
p{
--widthA: calc(10px + 190px);
--widthB: calc(var(--widthA) / 2);
--widthC: calc(var(--widthB) / 2);
width: var(--widthC);//50px
}四、简单的居中
calc()可以计算宽度以后，居中显示的实现就可以有很多方法，padding或者margin，但它的原理都是一样的。
p{
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为计算公式} 
