CSS3中的 calc()方法

CSS给人的印象就是固定的,一成不变。在CSS3中加入了一个类似函数的属性:calc();取自calculate(计算)。顾名思义,就是计算表达式的结果,然后传递给属性。
比如常见的宽度,特别常见于百分比布局中:

#div1{ width: calc(50% - 100px); }

上述表达式表示的就是ID为div1的元素,将它的宽度设置为父元素的50%,再加上100px的大小。这个是会根据父元素宽度变化而随时更新的,有点函数的意味了。

而且还可以用于不用单位之间的运算:

#span{ font-size: calc(1em + 3px); }

注:兼容性请查阅: caniuse.com

你可能感兴趣的:(css3)