Home » CSS/HTML » Firefox 将支持 css calc() 属性

Firefox 将支持 css calc() 属性

Firefox 将在新版本中添加对 css 中 calc() 的支持。目前暂时还没有浏览器支持该功能。
下面简要介绍下 calc() 的用法。顾名思义,calc() 既是计算的意思。例如:

/*
 * 两个并排的 div, 相距 1em。
 */
#a, #b {
    float:left;
}
#a {
    width:75%;
    margin-right: 1em;
}
#b {
    width: -moz-calc(25% - 1em);
}


从上例可以看出 calc() 可以混合不同的单位进行计算。同样你还可以将其应用到 margin, padding, border 等属性上。

和 "-moz-opacity" 等其他私有属性一样,在 Firefox 中初期还只能用 -moz-calc,前面有个"-moz-",以后可能会"转正"成为 "calc"。

calc() 目前将支持 +, -, *, /, mod, min, 以及 max 等运算。例如:

#c {
    width: -moz-calc(3px + 50%/3 - 3em + 1rem);
}
#d {
    height: -moz-min(36pt, 2em);
    width: -moz-max(50%, 18px);
}

相关阅读:
W3C’s reference

2010.06 12

If you enjoyed reading, you can bookmarking and sharing its on your favorite sites.

声明:本文采用Creative Commons License进行许可。转载请注明出自: Firefox 将支持 css calc() 属性

3 Comments

  • 莫矮水北

    2010年06月29日 2:14 下午

    css越来越NB了,不知道会不会有一天将完全替代js实现交互…

  • CSSBaby

    2010年07月1日 6:42 下午

    我觉得也是,至少可以部分代替 js.

  • Roorie-online

    2010年07月2日 8:28 上午

    very interesting, thanks

Leave a Comment :

:) :D :( :o 8O :? 8) :x :P :| ;) :lol: :oops: :cry: :evil: :twisted: :roll: :!: :?: :idea: :arrow: :mrgreen:

You can use these tags:
  1. <a href="" title="">
  2. <abbr title="">
  3. <acronym title="">
  4. <b>
  5. <blockquote cite="">
  6. <cite>
  7. <code>
  8. <del datetime="">
  9. <em>
  10. <i>
  11. <q cite="">
  12. <strike>
  13. <strong>

Recent Comments

  • HHTecShare

    HHTecShare

    @HHTecShar»

  • HHTecShare

    HHTecShare

    其实,把元素换成就不»

  • justjavac

    justjavac

    »

  • CSSBaby

    CSSBaby

    @文行天下 谢»

  • 文行天下

    文行天下

    这个网站的主题真不错»