CSS 3 中的计算函数 calc() 怎么用？

CSS 3 中是有计算函数的，名称是 calc()。

比如：

height:calc(300px * 0.1);

但是，如果我们想实现 width * 0.1，来实现宽高比约束，就没办法了，而且也不支持变量。所以说用处实际上并不大。只是有下面这种情况，我觉得有一点用，但也仅仅是省点代码而已。

/*原来的 CSS 代码，使 div 框居中显示*/
div
{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left:-200px;
    width:400px;
	height:200px;
	background:lightblue;
}
/*新的 CSS 代码，使用 calc()，同样使 div 框居中显示*/
div
{
	position:absolute;
	top:calc(50% - 100px);
	left:calc(50% - 200px);
    width:400px;
	height:200px;
	background:lightblue;
}

注意：前面的 calc(300px * 0.1)，* 两端要不要空格都没什么；而 calc(50% - 100px)，- 两端一定要有空格。所以操作符两端最好写上空格，否则很可能 calc() 不生效（+、- 必须要空格，*、/ 可以不要）。