css 的 calc() 值如何使用

   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常见的函数及作用：

这张表格列出了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()	创建复杂的动画效果

这里只是简单列出并解释作用，具体用法可以自行百度或者查看官网，如果感觉以后有可能用到的话可以收藏一手，没毛病一点