CSS3中有很多的隐藏的模块与功用。在这里我们将探索cal()功用；这个功用可能会改变你以前设计规划的方式，灰常的强悍~~

CSS3的cal()功用是用来计算长度（lengths），数字（numbers），角度（angles），过渡（transition）/动画时间（animation times）或者声音频率（sound frequencies）。它将允许你使用混合计算类型—在CSS3中也是一个异常强大的概念。

假设一个网站的设计要包含2个浮动的元素，你想要用一个60px的水平线将其分成2个相反宽度的元素，听起来似乎容易？如果页面设计的是960px，那么很容易，每个都是450px。

但是如果改元素是一个浮动框或者动态的规划怎样办？如果页面设计的是600px，那么大部分的设计者将会将水平线设置为10%，剩下的各45%，在宽屏或者方屏的浏览窗口中将会变形或者有边距！

侥幸的是，新功用cal()功用允许women计算宽度。在上面的例子中，我们就可以将其设置为总宽度的50%-30px，例如：

#element1, #element2 { float: left; width: calc(50% - 30px); } #element2 { margin-left: 60px; }

如果你想让水平线的大小是绝对于字体大小儿定，如4em，没问题：

#element1, #element2 { width: calc(50% - 2em); }

或者你想要在元素四周放一个2px的border，也没有问题：

#element1, #element2 { width: calc(50% - 2em - 4px); border: 2px solid #000; }

笔者建议尽量是计算简约些，但是复杂的计算是能够实现的，例如：