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

webstack • 2018年3月9日 pm10:49 • 教程 • 阅读 424

有没有想过 calc ()到底是什么？往下面看下去你马上就会知道了！它可以用来在 CSS 中创建布局。为此, 您也可以使用位置属性。
Css calc ()用于样式表内部的计算。函数允许使用数学表达式:

addition (+)
subtraction (-)
multiplication (*)
division (/)

能够在 CSS 中做数学是一个非常有用的特性, 特别是在创建复杂的布局时。
预处理器都具有使用数学函数的能力, 但是没有一个能够像 calc ()函数一样强大。一些预处理器的能力包括在 SASS 和 LESS 中嵌套。
使用 calc ()属性的主要优点是能够混合不同的单位。例如, 你可以将百分比除以无单位数或从百分比中减去像素。

语法

div {
  width: calc(100% - 30px)
}

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

浏览器支持

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

定位例子

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

.parent-element {
  height: 500px;
  width: 500px;
  background-color: #C98EED;
  position: relative;
}
.child-element {
  height: 100px;
  width: 100px;
  background-color: #8FC9FF;
  position: absolute;
  left: calc(100% - 300px);
  top: calc(100% - 150px);
}

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

宽度示例

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

.parent-element {
  height: 400px;
  width: 1000px;
  border: solid thin #808080;
}
.first-child {
  background-color: #C98EED;
  float: left;
  margin-right: 20px;
  width: 50%;
  height: 300px;
}
.second-child {
  background-color: #8FC9FF;
  float: right;
  width: calc(50% - 100px);
  height: 300px;
}

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