calc() It is a function in CSS, yes, css can also use functions. In fact, the upper limit of css is very high, and it can handle a lot of logic. There are even programmers who specialize in writing css but not js. Just generally write the logic in js
calc()Allows you to perform basic mathematical operations between CSS values representing distances that can be calculated. For example, can be used for any CSS property value that requires length, width, height, or other dimensions, such as width, height, margin,padding，使用方法如下：
.box{
width:100px;
}
.box .item{
width:calc(100% - 10px); //这个运算就表示宽度是父元素宽度的100%减去10像素，也就成了90像素
} It should be noted that when using, calc() you need to ensure that each part of the mathematical expression is enclosed in parentheses and must be separated by spaces , for example calc(50% - 10px)
-------------------------------------------------------------------------------------
css常见的函数及作用：
| function | effect |
| calc() | Perform basic mathematical operations on property values such as length, width, height, etc. |
| rgb() | Sets the color using the red, green, and blue primary color values |
| rgba() | Set color using red, green, blue primary color values and add transparency |
| hsl() | Set color using hue, saturation, lightness values |
| hsla() | Set color with hue, saturation, lightness values and add transparency |
| url() | Set background image or URL of media resource |
| was() | Set CSS variables |
| translate() | Transform element position |
| rotate() | Convert element rotation angle |
| scale() | Convert element size |
| skew() | Convert element tilt angle |
| cubic-bezier() | Create Bezier curves that control animation speed and curves |
| clamp() | Restrict element styles to minimum, recommended, and maximum values |
| min() | Choose the smaller value between two values |
| max() | Choose the larger value between two values |
| attr() | Get the custom attribute value of the HTML element and use it in the CSS property |
| box-shadow() | Create a drop shadow effect for an element |
| text-shadow() | Add shadow effect to text |
| linear-gradient() | Create a linear gradient effect |
| radial-gradient() | Create a Radial Gradient Effect |
| repeat() | Specifies how the background image is tiled |
| round() | Specifies the rounded corners in the four directions of the tiling effect |
| space() | Specify tiling effect interval |
| stretch() | Specify Tiling Effect Stretch |
| filter() | Adjust the color and style of an image |
| transition() | Create simple transition effects |
| animation() | Create complex animation effects |
Here is just a brief list and explanation of the functions. You can use Baidu or check the official website for specific usage. If you feel that you may use it in the future, you can collect it. There is nothing wrong with it.