CSS3 calc() 用法

CSS3 的 calc() 函数允许我们在属性值中执行四则运算这样的数学计算操作。例如，我们可以使用 width:calc(100px + 50px); 指定一个元素宽的固定像素值为多个数值的和。

 

需要先说明一点，我看好多文章都会说一点： calc() 函数内符号的两侧需要加个空格。亲测： 

• calc() 函数内使用"+"、"-"时，两侧的空格是必须的，如果是"*"、"/"，空格就是可有可无的！
• 其次，在 less 文件中，直接使用 calc 是不起作用的，需要我们在 calc 前面加一个 ~，就像这样：~calc(30% + 50px)

calc()函数的特点：

1. calc() 函数能够组合不同的单元

特别是，我们可以混合计算绝对单元（比如百分比、视口单元）与相对单元（比如像素）。

.foo {
    width: calc(100% - 50px); /* .foo 的宽度总是比它父元素小 50px */
    height: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

2. 使用 calc()，计算的值是动态的

也就是当 calc() 里面的参数发生变化时， calc() 的结果会跟随一起进行实时的变化。举例：

html {  
    font-size: calc(100vw / 30);
}

1rem 为视口宽度的 1/30。在页面上的任何文本，将会根据你的视口自动缩放，会显示相同的文本数量，而不管视口的真实尺寸是多少。 

3. 允许嵌套使用

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

4. 兼容性较好，clac() 已经得到普遍支持

  

兼容措施：对于不支持 calc() 的浏览器，整个属性值表达式将被忽略。因此我们可以使用一个固定值作为回退。

.foo {
    width: 90%; /* 给不支持的浏览器设置的值，不支持 calc() 的浏览器下一行会被会略 */
    width: calc(100% - 50px);
}

应用场景

Example 1 - 元素居中

/* .foo 高度：300px 宽度：300px */
/* 方法 1: */
.foo {
    position: absolute;
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}

/* 方法 2: 使用 calc() */
.foo {
    position: absolute
    top: calc(50% - 150px);
    left: calc(50% - 150px);
}

Flexbox 的介入，已经很少需要这种方法了。不过，一些情况下 Flexbox 不能被使用。比如，元素需要绝对定位或者固定定位，这种方法是有用的。

Example 2 - 创建根栅格尺寸

使用 rem，calc() 函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小为视口宽度的一部分（即：根元素的文字大小会随着窗口的大小发生变化，但是字体大小与窗口的比例不变，始终都是1/30）。

html {  
    font-size: calc(100vw / 30);
}

现在， 如果我们对非文本使用 rem 设置大小，它们同样遵守这个行为。一个 1rem 宽度的元素总是视口元素宽度的 1/30。

Example 3 - 更明了地表达一个数值

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

.foo {
    width: 33.333333334%;
}

然而，用calc()能够更加清晰和更强的可读性：

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

使用 calc()，我们还能做更多的事情，比如创建一个栅格系统。它是 CSS 最有用的新特性之一。