1、居中元素
使用calc()给我们提供另一个垂直元素的解决方案。如果我们知道元素的尺寸，一个典型的解决方案使用负外边距移动自身距离高于宽的一般，如下：
/*对于300px*300px*/ position:absolute; top: 50%; left: 50%; margin-top: –150px; margin-left: –150px;
如果使用calc()函数，那么我们可以只通过top和left值便能实现相同的效果。
/*对于300px*300px*/ position:absolute; top: calc(50% – 150px); left: calc(50% – 150px);
Flexbox的介入，已经很少需要这种方法了。不过，一些情况下Flexbox不能被使用。比如，元素需要绝对定位或者固定定位，这种方法是有用的。
2、创建根栅格尺寸
使用rem、calc()函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小为视口宽度的一部分。
html{ font-size: calc(100vw / 30); }
现在1rem为视口宽度的1/30。在页面上的任何文本，将会根据你的视口自动播放。更进一步，相同比例的视口总会显示相同的文本数量，不管视口的真实尺寸是多少。
如果我们对非文本使用rem设置大小，他们同样遵守这个行为。一个rem宽度的元素总是视口元素宽度的1/30.
3、清晰
calc()使计算更加清晰。如果你使用一组项目为他们父元素容器的1/6，你可以这么写：
width：16.%；
然而，它能够更加清晰并具有可读性：
width：calc(100% / 6)；
转载于:https://www.cnblogs.com/zhx119/p/11242503.html
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/198397.html原文链接：https://javaforall.net
