CSS3 你不知道的calc() 用法

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

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

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

calc()函数的特点：

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);
}

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

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

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

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

允许嵌套使用

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

参考链接：
https://blog.csdn.net/qq_44647809/article/details/115600500
https://www.runoob.com/cssref/func-calc.html
https://www.w3school.com.cn/cssref/func_calc.asp