cacl的使用

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.666666%；

然而，它能够更加清晰并具有可读性：

width：calc(100% / 6)；

 

转载于:https://www.cnblogs.com/zhx119/p/11242503.html