calc() 是 CSS 中的一个函数，没错，css也能使用函数。其实css的上限很高，可以处理 很多逻辑，甚至有那种专门写css不写js的程序员。只是一般情况下都把逻辑写在js中
calc()允许你在表示距离的值可计算的 CSS 值之间执行基本的数学运算。如，可以用于任何需要长度、宽度、高度 或其他尺寸的 CSS 属性值，例如 width、height、margin、padding，使用方法如下：
.box{
width:100px;
}
.box .item{
width:calc(100% - 10px); //这个运算就表示宽度是父元素宽度的100%减去10像素，也就成了90像素
} 要注意的是，在使用 calc() 时需要确保数学表达式的每个部分包含在括号中，并必须用空格分隔，例如 calc(50% - 10px)
-------------------------------------------------------------------------------------
css常见的函数及作用：
| 函数 | 作用 |
| calc() | 在长度、宽度、高度等属性值中执行基本的数学运算 |
| rgb() | 使用红、绿、蓝三原色值设置颜色 |
| rgba() | 使用红、绿、蓝三原色值设置颜色并添加透明度 |
| hsl() | 使用色调、饱和度、亮度值设置颜色 |
| hsla() | 使用色调、饱和度、亮度值设置颜色并添加透明度 |
| url() | 设置背景图像或媒体资源的 URL |
| var() | 设置 CSS 变量 |
| translate() | 转换元素位置 |
| rotate() | 转换元素旋转角度 |
| scale() | 转换元素大小 |
| skew() | 转换元素倾斜角度 |
| cubic-bezier() | 创建控制动画速度和曲线的贝塞尔曲线 |
| clamp() | 将元素样式限制为最小值、推荐值和最大值 |
| min() | 选择两个值之间的较小值 |
| max() | 选择两个值之间的较大值 |
| attr() | 获取 HTML 元素的自定义属性值，并在 CSS 属性中使用 |
| box-shadow() | 创建元素的投影效果 |
| text-shadow() | 在文本中添加阴影效果 |
| linear-gradient() | 创建线性渐变效果 |
| radial-gradient() | 创建径向渐变效果 |
| repeat() | 指定背景图像如何平铺 |
| round() | 指定平铺效果的四个方向的圆角 |
| space() | 指定平铺效果间隔 |
| stretch() | 指定平铺效果拉伸 |
| filter() | 调整图像的颜色和样式 |
| transition() | 创建简单的过渡效果 |
| animation() | 创建复杂的动画效果 |
这里只是简单列出并解释作用，具体用法可以自行百度或者查看官网，如果感觉以后有可能用到的话可以收藏一手，没毛病一点