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

有没有想过 calc ()到底是什么? 往下面看下去你马上就会知道了!它可以用来在 CSS 中创建布局。

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

  1. addition (+)
  2. subtraction (-)
  3. multiplication (*)
  4. 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);
}

CSS中冷门却十分有用的calc()
在这个例子中, 我们将看到 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;
}

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

结论

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

原创文章,作者:webstack,如若转载,请注明出处:https://www.webstacks.cn/tutorial/1203.html

发表评论

登录后才能评论