作者 本文介绍了 CSS3 的 calc() 值。此功能尚未在任何 Firefox 版本中上线，但正在进行实施工作。
Firefox 将支持 CSS calc() 值，它允许您使用算术表达式计算长度值。这意味着您可以使用它来定义 div 的大小、边距的值、边框的宽度等等。
以下是一个如果没有 calc() 函数将很难设置的布局示例
/*
* Two divs aligned, split up by a 1em margin
*/
#a {
width:75%;
margin-right: 1em;
}
#b {
width: -moz-calc(25% - 1em);
}
此示例确保输入文本字段不会与其父级重叠
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);
}
更多详细信息，请参阅
关于 Paul Rouget
Paul 是一位 Firefox 开发人员。
112 条评论