Firefox 4: CSS3 calc()

文章翻译自Mozilla Hacks。 这篇文章介绍了CSS3中的calc()值。不过这个特性目前还没有加入到火狐中，工程师正在制作中。

火狐将会支持CSS3规范中的calc()，允许您使用算术表达式来计算长度宽度等数值。也就意味着您将可以使用他来定义div的大小、内外边距的大小、边界的宽度等等。

下面是一个简单的示例，如果没有calc()的话，可能需要一点小技巧才能设定好布局。

/*
* Two divs aligned, split up by a 1em margin
*/
#a {
    width:75%;
    margin-right: 1em;
}
#b {
    width: -moz-calc(25% - 1em);
}

下面这个例子演示了如何使用calc()来保证输入框不过覆盖他的父级容器：

input {
    padding:2px;
    border:1px solid black;
    display:block;
    width: -moz-calc(100% - 2 * 3px);
}

calc()非常强大的一个特性是您可以在同一个计算中使用多种单位混合计算：

width: -moz-calc(3px + 50%/3 - 3em + 1rem);

目前的实现支持 +, -, *, /, mod, min, 和 max运算符。

我们将会支持min() 和 max() 函数，差不多是这个意思：

div {
    height: -moz-min(36pt, 2em);
    width: -moz-max(50%, 18px);
}

想了解更多信息：

• Mozilla Bug
• W3C文档