CSS中常用的一些函数
calc
calc()函数支持加减乘除四种运算，很多类型都可以使用calc()函数，例如angle、length、frequency、time，percentage、number、integer，因为calc()有很多约束，所以这些类型不一定都可以出现calc()函数。
我们在calc()函数中不能使用当前css属性不支持的数据类型。
// 下面这些都是不合法的 width: calc(100% - 4deg); width: calc(12s - 10); 复制代码
我们在calc()函数中，运算符前后带百分比或者单位的值不能进行乘除运算，只能进行加减运算。除法运算斜杠右侧必须是不为0的数值类型。calc()书写上也有一定限制的，减号和加号两边一定要有空格。乘法和除法符号两侧不需要空格，但是为了格式一致，我们一般使用空格隔开。
我们一般只需要定义一个CSS的属性，让其他CSS样式基于这个属性进行构建，然后我们就可以通过JavaScript代码操作CSS的属性值，就可以在整个网页中去动态变化。
min和max和clamp函数
从语法上看，和calc()函数类似，任何可以使用angle、length、frequency、time，percentage、number、integer数据类型的地方都可以使用min()、max()、clamp()函数，而且min()、max()、clamp()这三个函数与calc()函数是可以相互嵌套使用的。 demojs
width: calc(min(600px, 87vw) / 3); 复制代码
min()函数支持一个或多个表达式，每个表达式之间使用逗号分割，将最小的表达式的值作为返回值。而且min()函数的表达式可以是数学表达式，例如算术运算符。
width: min(11px * 11, 11rem); width: min(calc(22px * 43), 88em); width: min(75px * 43, var(--width)) 复制代码
width: min(11vw, 6em, 81px)中出现了2个相对长度，1个固定长度值，所以width计算值最大的就是81px, 但是实际的宽度值我们要根据浏览器视口宽度去判断，当浏览器的视口宽度小于800px, 或者文字字号小于16px， 真实的宽度值就会更小，这个意思是说，虽然我们函数的名称是min()用来表示更小，但是这个函数用来限制最大值的。
max()函数和min()函数语法类似，主要区别是max()函数返回的是最大值，而min()函数返回的是最小值。width: max(11vw, 6em, 80px)其中最小宽度是80px, 但是如果浏览器宽度大于800px，或者文字字号大于16px，则最终的宽度会很大，这个意思就是说，虽然max()表示最大值，但是它的作用是限制最小值的，这就和min()是相反的，除此之外max()函数其他特性和min()都是相似的。
clamp()函数的作用是返回一个区间范围的值。语法使用：clamp(MIN, VAL, MAX)，其中MIN表示最小值，VAL表示首选值，MAX表示最大值，意思是VAL在MIN和MAX范围内，则使用VAL作为函数返回值，如果VAL大于MAX，则使用MAX作为返回值，如果VAL小于MIN，则使用MIN作为返回值，所以clamp(MIN, VAL, MAX)实际上等同于max(MIN, min(VAL, MAX))。
作者：周帅帅
链接：https://juejin.cn/post/7028165173135278111