css的函数有哪些？他们都有什么作用？你认得哪些？你用过哪些？今天我就带你们一起来了解一下css的函数吧！
1. calc()
calc()函数是css中最常用的函数之一，它可以用来计算css属性值中的数学表达式，比如：
div {
width: calc(100% - 20px);
}
上面的代码中，div的宽度为100%减去20px的值，通常情况下我们在布局时，在部分元素宽度或高度不确定，或者需要根据屏幕宽度自适应时，我们会使用calc()函数来计算元素的宽度或高度。
calc()可以使用的运算符有：
+加-减*乘/除%取余()括号
calc()函数还可以使用css变量，比如：
:root {
--width: 100px;
}
div {
width: calc(var(--width) * 2);
}
calc()函数还可以使用calc()函数，比如：
div {
width: calc(calc(100% - 20px) / 2);
}
2. min()和max()
min()函数可以用来计算多个值中的最小值，比如：
div {
width: min(100px, 50%);
}
max()函数可以用来计算多个值中的最大值，比如：
div {
width: max(100px, 50%);
}
通常情况下，我们会使用min()和max()函数来限制元素的最大或最小宽度、高度，比如：
div {
width: max(100px, 50%);
max-width: 200px;
height: min(100px, 50%);
max-height: 200px;
}
上面的代码中，div的宽度和高度都限制在200px以内，但是div的宽度和高度不能小于100px。
3. clamp()
clamp()函数可以用来限制一个值的范围，比如：
div {
width: clamp(100px, 50%, 200px);
}
上面的代码中，div的宽度限制在100px和200px之间，但是div的宽度不能小于50%。
这个函数的参数有三个，第一个参数是最小值，第二个参数是默认值，第三个参数是最大值。
4. attr()
attr()函数可以用来获取元素的属性值，比如：
<div data-width="100px"></div>
div {
width: attr(data-width);
}
上面的代码中，div的宽度为100px。
注意：
attr()理论上能用于所有的 CSS 属性但目前支持的仅有伪元素的 content 属性，其他的属性和高级特性目前是实验性的，也就是我上面的代码是不起作用的。
attr()的作用案例可以参考我之前写的文章：css的属性选择器的妙用，来用它实现一个轻量的tips组件吧。
5. var()
var()函数可以用来获取css变量的值，比如：
:root {
--width: 100px;
}
div {
width: var(--width);
}
上面的代码中，div的宽度为100px。
var()函数还可以设置默认值，比如：
:root {
--width: 100px;
}
div {
width: var(--height, 200px);
}
上面的代码中，div的宽度为200px。
6. env()
env()函数可以用来获取环境变量的值，比如：
div {
width: env(safe-area-inset-left);
}
它的用法和var()函数类似，但是它的值是由浏览器提供的，而不是由开发者提供的。
目前，env()函数只支持safe-area-inset-left、safe-area-inset-right、safe-area-inset-top和safe-area-inset-bottom这四个环境变量。
safe-area-inset-left、safe-area-inset-right、safe-area-inset-top和safe-area-inset-bottom这四个环境变量分别表示安全区域的左、右、上和下的内边距。
7. url()
url()函数可以用来获取图片的地址，比如：
div {
background-image: url(./img.png);
}
这个函数用于获取资源地址，比如图片、字体等。
目前支持的属性有：
background-imagecursorlist-style-imageborder-image-sourcemask-image- ...任意可以使用图片的属性
content@font-face- ...很多，目前常用的大概就这些
8. image-set()
image-set()函数可以用来设置图片的srcset，比如：
div {
background-image: image-set(url(./img.png) 1x, url(./assets/img.png) 2x);
}
这里的1x和2x是指图片的分辨率，1x表示1倍，2x表示2倍。
通常用于跨设备的适配，比如retina屏幕。
结束
本文主要介绍了css中的函数，包括calc()、min()、max()、attr()、var()、env()、url()和image-set()这八个函数。
css中还有很多函数，但是没有上面这些函数常用，感兴趣可以作为拓展自行学习。
