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
今天的文章cacl的使用_cacl2与水反应方程式分享到此就结束了，感谢您的阅读。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/71942.html
