css calc()函数

链接: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() 函数提供了更好的解决方案。首先，我们能够组合不同的单元。特别是，我们可以混合计算绝对单元（比如百分比与视口单元）与相对单元（比如像素）。例如，我们可以创造一个表达式，用一个百分比减掉一个像素值。