calc属性

1. calc() 内符号两侧的空格并非都是强制需要的！+-必须有，*/可以没有

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

3. 使用 calc() 计算的值是动态的：

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

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

3. 可以嵌套使用。

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

4. 兼容性较好

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

细节可以参考这篇文章：https://blog.csdn.net/qq_44647809/article/details/115600500