链接:http://caibaojian.com/css3-calc.html
css3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如,我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。
.foo {
width: calc(100px + 50px);
}
为什么是 calc()
如果你使用过 CSS 预处理器,比如 SASS,以上示例你或许碰到过
.foo {
width: 100px + 50px;
}
// Or using SASS variables
$width-one: 100px;
$width-two: 50px;
.bar {
width: $width-one + $width-two;
}
然而,calc() 函数提供了更好的解决方案。首先,我们能够组合不同的单元。特别是,我们可以混合计算绝对单元(比如百分比与视口单元)与相对单元(比如像素)。例如,我们可以创造一个表达式,用一个百分比减掉一个像素值。