CSS中冷门却十分有用的calc()

有没有想过 calc ()到底是什么？ 往下面看下去你马上就会知道了！它可以用来在 CSS 中创建布局。 为此, 您也可以使用位置属性。

Css calc ()用于样式表内部的计算。 函数允许使用数学表达式:

1. addition (+)
2. subtraction (-)
3. multiplication (*)
4. division (/)

能够在 CSS 中做数学是一个非常有用的特性, 特别是在创建复杂的布局时。

预处理器都具有使用数学函数的能力, 但是没有一个能够像 calc ()函数一样强大。 一些预处理器的能力包括在 SASS 和 LESS 中嵌套。

使用 calc ()属性的主要优点是能够混合不同的单位。 例如, 你可以将百分比除以无单位数或从百分比中减去像素。

语法

需要注意的是, 操作符的两边都必须有空间。

浏览器支持

检查 CSS 属性是否被浏览器支持的最好方法是访问 CanIUse.com。 我们可以看到, calc ()函数有相当好的浏览器支持, 超过94% 。

想要学习web前端的同学，可以参考成都web前端培训班提供的学习大纲；

定位例子

一个简单的例子来说明 calc ()函数的功能是在容器中定位 div。

在这个例子中, 我们将看到 calc ()函数如何帮助我们定位子元素相对于父元素的位置。之后, 我们可以给元素一些样式和文本一些格式。

宽度示例

另一个很好的例子是如何使用 calc ()函数来设置元素的宽度。

这样, calc ()函数被用来定义。 第二个子元素使用百分比和像素单位。 这很好地说明了该函数的单位混合能力。

结论

我们希望你从这篇文章中学到了一些新东西。 我们已经向您展示了 calc ()函数的基本知识, 现在是时候让你玩一玩了, 并释放它的全部潜能。