css3 calc()函数

calc()是css3的一个新增的功能，用于动态计算长度值(样式表内部的计算)。
可以使用calc()给元素的border、margin、pading、font-size、width、height等属性动态的设置值。

1. css语法

calc(expression)

expression 必须存在，一个数学表达式，结果将采用运算后的返回值。

2. 用法
使用calc()须注意几点:
- 运算符前后都需要保留一个空格；
- 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 “+”, “-”, “*”, “/” 运算；
- calc()函数使用标准的数学运算优先级规则；

使用 calc ()属性的主要优点是能够混合不同的单位。 例如, 百分比中减去像素。

width: calc(100% - 100px);

3. 浏览器兼容
在IE9+、FF4.0+、Chrome19+、Safari6+都得到了较好的支持，使用时在其前面加上各浏览器厂商的识别符前缀。

	-moz-calc(expression);
	-webkit-calc(expression); 
	-o-calc(expression);
	-ms-calc(expression);
	calc(expression);

.box{
	width: -moz-calc(100% - 100px); 
	width: -webkit-calc(100% - 100px);
	width: -o-calc(100% - 100px);
	width: -ms-calc(100% - 100px);
	width: calc(100% - 100px);
}

4.应用
如果元素的宽度为100%时，其自身不带其它盒模型属性设置还好，如果有别的类似margin、padding或border的属性设置，那将导致盒子被撑破。为了解决撑破容器的问题，以前我们只能计算div.box的宽度，用容器的宽度减去padding和border的值 ，但有时候我们苦于不知道元素的总宽度，比如说是自适应布局，只知道一个百分比值，但其它的值又是*px之类的值，这就比较难解决了。随着css3的出现，其中利用box-sizing来改变元素的盒模型以达到最终想要的效果，但是calc()解决此问题更加方便。

<div class="container">
	<div class="left"></div>
	<div class="right"></div>
</div>

.content{
  width: 500px;
  height: 100px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}
.left{
  float: left;
  width: 100px;
  height: 100%;
  margin-right: 20px;
  background-color: #ff0033;
}
.right{
  float: left;
  width: calc(100% - 120px);
  height: 100%;
  background-color: #000000;
}