calc()

//执行数学操作
.foo {
  width: calc(100px + 50px);
}

混合计算绝对单位，用一个百分比减掉一个像素值。

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

运算。比如，，，，， 或者 数据类型

.foo {
    width: calc(50vmax + 3rem);
    padding: calc(1vw + 1em);
    transform: rotate( calc(1turn + 28deg) );
    background: hsl(100, calc(3 * 20%), 40%);
    font-size: calc(50vw / 3);
}

可以嵌套

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

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

不支持 calc() 的浏览器

.foo {
    width: 90%; /* Fallback for older browsers */
    width: calc(100% - 50px);
}

什么场景可以使用 calc()

居中元素

.foo {
    position: absolute
    top: 50%;
    left: 50%;
    marging-top: -150px;
    margin-left: -150px;
}

//使用 calc() 函数

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

创建根栅格尺寸
使用 rem，calc() 函数能够用来创建一个基于视口的栅格

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

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

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

.foo {
    width: 16.666666667%;
}
然而，它能够更加清晰并具有可读性：

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