天天看点

CSS3中的 calc()方法

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

比如常见的宽度,特别常见于百分比布局中:

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

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

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

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

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