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

阅读余下内容
 

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注


京ICP备12002735号