CSS常用计算函数

一.什么是CSS中的函数？

😊我们知道在CSS中有很多类似于rgbrgbarotatescale等等，其实这些就是CSS中的函数，就像rgb在颜色中应该没有一个颜色叫做rgb吧，其实这些都是CSS提供给我们的函数供我们传入一些数据让引擎来进行计算，返回给我们具体的颜色值，这样做的好处是比较灵活，今天我们就在这些内容的基础上学习一些CSS中常见且好用的CSS计算函数。

var：使用CSS定义的变量。
calc：计算CSS的值，通常用于计算元素的大小和位置。

二.var函数的使用

🤡我们在日常的开发中可能会遇到这样的场景，在页面中有很多相同的颜色值，这样的话我们就需要一次一次的去复制粘贴对应的颜色，但是可能有时候我们需要直接把这些相同的颜色全部更换成某个颜色，那么我们就老老实实的一个一个的修改，会很多麻烦，也可能容易出现错误，所以CSS就提供了var函数，用来使用CSS定义的变量，那么CSS是如何定义变量的哪？

😶‍🌫️CSS定义变量的方式如下，需要在定义的变量名前面加上--表示这是自定义的变量。

css 复制代码

--main-color:red

🎯我们使用自定义变量的方法很简单，就是使用我们所说的var函数来使用它。

css 复制代码

:root {
  --main-color: red;
}
/* :root 选中的就是html标签 */

.main-box {
  color: var(--main-color);
}

🔔变量的定义位置建议定义在html当然我们可以使用:root来代替，因为定义变量的使用规则就是只有它的子节点可以使用，所以一般我们都会定义在全局中，这点跟JS中的作用域比较相似，可以类比理解。

三.calc函数的使用

👽calc的使用场景是进行一些简单的数学运算，假如有一个大盒子中套了两个小盒子，一个盒子宽度固定，我们想要另一个盒子将剩余的内容占满，其实这个需求很简单哪，我们直接使用flex布局就可以了，但是如果我们不使用这个布局的方式该如何进行实现哪？

css 复制代码

.main-box {
  width: 700px;
  height: 100px;
  background-color: aquamarine;
}

.main-box>div:first-child {
  display: inline-block;
  width: 300px;
  height: 100%;
  background-color: antiquewhite;
}

.main-box>div:last-child {
  display: inline-block;
  width: calc(700px - 400px);
  height: 100%;
  background-color: blueviolet;
}

🔔注意：当我们在进行calc的计算的时候运算符左右两边需要空格，否则会没有反应。