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
函数能让我们方便的处理宽度百分比问题。在你的页面上也试一试吧!看有什么效果。