在CSS里用calc进行计算

CSS就像迷一样让人想不透；我们喜欢CSS，是因为它很简单，但我们又不停的要求它提供更多的功能。CSS里已经新增的特征有placeholders, 动画技术和click events等。但有一个问题是，CSS是静态的；完全没有逻辑操作。可CSS里的calc函数却打破了这种趋势，它提供了程序员使用CSS编程计算的能力。

CSS代码

这个calc计算器在计算相对宽度时非常的有用。它能执行加、减、乘、除。看看下面的代码写法：

/* basic calc */
.simpleBlock {
	width: calc(100% - 100px);
}

/* calc in calc */
.complexBlock {
	width: calc(100% - 50% / 3);
	padding: 5px calc(3% - 2px);
	margin-left: calc(10% + 10px);
}

有些浏览器里可能需要在calc()上添加浏览器前缀。一个需要注意是，在操作符前后要留有空格，不然，减号可能会被当成负数的符号。

CSS里的calc函数是另一个CSS取代JavaScript作用的例子，我认为这是件好事。当我们越来越流行流式页面布局时，calc函数能让我们方便的处理宽度百分比问题。在你的页面上也试一试吧！看有什么效果。