有没有想过 calc ()到底是什么？ 往下面看下去你马上就会知道了！它可以用来在 CSS 中创建布局。 为此, 您也可以使用位置属性。
Css calc ()用于样式表内部的计算。 函数允许使用数学表达式:
addition (+)subtraction (-)multiplication (*)division (/)
能够在 CSS 中做数学是一个非常有用的特性, 特别是在创建复杂的布局时。
预处理器都具有使用数学函数的能力, 但是没有一个能够像 calc ()函数一样强大。 一些预处理器的能力包括在 SASS 和 LESS 中嵌套。
使用 calc ()属性的主要优点是能够混合不同的单位。 例如, 你可以将百分比除以无单位数或从百分比中减去像素。
语法
需要注意的是, 操作符的两边都必须有空间。
浏览器支持
检查 CSS 属性是否被浏览器支持的最好方法是访问 CanIUse.com。 我们可以看到, calc ()函数有相当好的浏览器支持, 超过94% 。
定位例子
一个简单的例子来说明 calc ()函数的功能是在容器中定位 div。
在这个例子中, 我们将看到 calc ()函数如何帮助我们定位子元素相对于父元素的位置。之后, 我们可以给元素一些样式和文本一些格式。
宽度示例
另一个很好的例子是如何使用 calc ()函数来设置元素的宽度。
这样, calc ()函数被用来定义。 第二个子元素使用百分比和像素单位。 这很好地说明了该函数的单位混合能力。
结论
我们希望你从这篇文章中学到了一些新东西。 我们已经向您展示了 calc ()函数的基本知识, 现在是时候让你玩一玩了, 并释放它的全部潜能。