CSS3中的 calc()计算函数

calc() 函数用于动态计算长度值

• 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值单位都可以使用calc()函数进行计算；
• calc()函数支持 “+”, “-”, “*”, “/” 运算；
• calc()函数使用标准的数学运算优先级规则；

clac() 嵌套

calc() 函数可以嵌套。在函数里边，会被视为简单的括号表达式，如下例所示。

.foo {
    width: calc( 100% / calc(100px * 2) );
}

函数的计算值如下所示：

.foo {
    width: calc( 100% / (100px * 2) );
}

实例：

1. 我们可以创造一个表达式，用一个百分比减掉一个像素值

.foo {
    width: calc(100% - 50px);
}

本例中，.foo 元素总是小于它父元素宽度 50px。

2. 使用 calc() 给我们提供另一个垂直居中元素的解决方案。如果我们知道元素的尺寸，一个典型的解决方案是使用负外边距移动自身距离高与宽的一半，如下所示：

// Assuming .foo is 300px height and 300px width
.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}

使用 calc() 函数，我们仅仅通过 top 与 left 属性便能实现相同的效果：

.foo {
    position: absolute
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}

3. calc()使计算更加清晰。如果你使一组项目为它们父元素容器宽度的 1/6，你可能值么写：

.foo {
    width: 16.666666667%;
}

然而，它能够更加清晰并具有可读性：

.foo {
    width: calc(100% / 6);
}

参考链接：CSS3 calc()是怎么实现计算