今天就来看看CSS中的数学函数吧。CSS数学函数允许在CSS属性值中执行数学表达式。CSS数学函数仅支持加法(+)、减法(-)、乘法(*)、除法(/)。目前CSS中有四个得到良好支持的数学函数：min()：该函数允许您从逗号分隔的表达式中选择一个最小值作为CSS属性值；max()：该函数可以从一个逗号分隔的表达式列表中选择一个值中最大（正方向）的值作为属性的值；calc()：此函数允许在声明CSS属性值时执行一些计算；clamp()：该函数的作用是将一个值限制在一个上限和一个下限之间，当这个值超出最小值和最大值的范围时，选择最小值和最大值之间的一个值使用。它接收三个参数：最小值、首选值、最大值。这些CSS函数可能会以意想不到的方式使用，例如在渐变和颜色函数中以及与CSS自定义属性结合使用。让我们来看看这四个CSS函数吧！1.calc()基本使用calc()函数有助于在CSS属性值中执行计算。它可用于以下属性：长度、频率、角度、时间、百分比、数字、整数。宽度：计算（100%-80px）；calc()函数将一个表达式作为其参数，并将该表达式的结果作为值。该表达式可以是以下运算符（+、-、*、/）的任意组合，使用标准运算符处理规则的简单表达式。表达式中的操作数可以取任意长度的值。如果需要，您甚至可以在一个表达式中为这些值混合使用不同的单位。需要时，也可以使用括号来确定求值顺序。此函数用途广泛，例如，如果您希望某些内容占据视口高度的大部分。这时候可以使用相对单位vh和绝对单位px进行混合计算：.content{height:calc(100vh-60px);}当视口大小改变或者用户使用更大或更小的设备时，100vh值会动态更新，因此计算也会动态更新。使用calc()的好处是可以避免添加一些幻数，避免使用JavaScript来计算样式的属性值。生成调色板我们可以通过传入CSS自定义属性来扩展calc()的功能。一个非常有用的示例是使用hsl()（用于色调、饱和度和亮度）来创建一致的调色板。给定饱和度、亮度和起始色调的值，可以使用calc()函数计算互补值以构建完整的调色板。.colors{--base-hue:140;--饱和度：95%；--亮度：80%；--旋转：60；颜色：#222；text-align:center;}.color{padding:0.25rem;背景颜色：hsl(var(--hue),var(--saturation),var(--lightness));}.color1{--hue:calc(var(--base-hue));}。color2{--hue:calc(var(--base-hue)+var(--rotation));}.color3{--hue:calc(var(--base-hue)+var(--rotation)*2);}生成的调色板：注意：使用calc()函数时需要注意：“+和-运算符两边必须有空白字符。”例如，calc(50%-8px)将被解析为无效表达式，导致：百分比后跟负长度值。带有空格的有效表达式calc(8px+-50%)被解析为：长度后跟加号后跟负百分比。and/这两个运算符前后不需要空格，但如果考虑统一性，还是建议加上空格。除以0将导致HTML解析器抛出异常。自动布局和固定布局的表格中涉及表格列、表格列组、表格行、表格行组、表格单元格的宽高百分比的数学表达式，auto可以按指定处理。calc()函数支持嵌套，但支持的方法是：将嵌套的calc()函数视为普通括号。所以，直接在函数内部使用括号即可。浏览器兼容性clac()函数在四个函数中具有最好的跨浏览器支持：2.clamp()基本上使用clamp()的实用目的：在可接受的值范围内设置边界。clamp()用于长度、频率、角度、时间、百分比、数字、整数属性。其语法如下：clamp(MIN,VAL,MAX)clamp(MIN,VAL,MAX)实际上是指max(MIN,min(VAL,MAX))。clamp()函数接收三个以逗号分隔的表达式作为参数，按最小值、首选值和最大值的顺序排列。这三个值的顺序很重要。当首选值小于最小值时，使用最小值。当首选值介于最小值和最大值之间时，使用首选值。当首选值大于最大值时，使用最大值。此表达式可以是数学函数、文字或计算结果为有效参数类型的其他表达式，例如attr()或嵌套的min和max。作为数学表达式，可以在不使用calc()函数的情况下使用加法、减法、乘法和除法运算。括号也可用于确定求值顺序。表达式中的每个值都可以采用不同的单位。考虑以下示例：.element{width:clamp(200px,50%,1000px);}有一个元素，其最小宽度为200px，首选值为50%，最大值为1000px。此元素的宽度永远不会低于200px，首选值为50%，仅在视口宽度大于400px且小于2000px时有效，宽度不会超过1000px。那么clamp()是怎么计算出来的呢？当clamp()作为一个值时，相当于使用了max()和min()函数：.element{width:clamp(200px,50%,1000px);width:max(200px,min(50%,1000px));}这里的50%取决于浏览器视口宽度，假设视口宽度为1150px，解析过程如下：假设字体大小要求最小为16px以及最大50px的标题。clamp()函数将给出一个介于两者之间的值，不会低于最小值或超过最大值。.title{font-size:clamp(16px,5vw,50px);}在这里使用clamp()是完美的，因为它确保使用的字体大小易于访问和阅读。如果您要使用min()来设置最大字体大小，您将无法控制小视口中的字体大小。.title{font-size:min(3vw,24px);在移动视口中，字体很小。所以不要只在字体大小上使用min()函数。当然也可以通过媒体查询的方式取消或者添加。如上所述，您可以在max()函数中嵌套一个min()，这将模拟clamp()函数：.title{font-size:max(16px,min(10vw,50px));}BorderandShadows有时需要移动设备上的边框宽度和半径应该更小，通过使用clamp()可以根据视口宽度动态更改它们。.element{box-shadow:03px10px0红色;边框：最小（1vw，10px）实心#468eef；border-radius:clamp(7px,2vw,20px);box-shadow:03pxclamp(5px,4vw,50px)0rgba(0,0,0,0.2);}GridGap使用CSSGrid布局时设置网格间隙，并希望减少移动视口的间隙。你可以使用clamp():.wrapper{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));grid-gap:clamp(1rem,2vw,24px);}注释允许将表达式的值设置为max()和min()。这些表达式是数学表达式，因此您可以进行加、减、乘、除运算。表达式可以是组合+、-、*、/等运算符的值，使用标准运算符优先级规则，确保+、-两边各有一个空格。表达式中的操作数可以是长度值。可以为每个值设置不同的单位。括号也可用于确定求值顺序。浏览器兼容性3.min()基本上使用min()函数方法来接受一个或多个以逗号分隔的表达式作为其参数，并且具有最小值的表达式的值将被用作指定属性的值。min()的实际作用：以包含元素响应上下文的方式设置最大允许值的界限。尽管是一个min()函数，但结果是提供的值将是该属性允许的最大值。看一个简单的例子，我希望元素的最大宽度是500px：.element{width:min(50%,500px);}浏览器必须选择最小值（50%,500px）。选择此选项取决于视口宽度。如果50%的计算值大于500px，那么它将被忽略并使用500px代替。否则，如果50%的计算值小于500px，则将使用50%作为宽度值。viewportwidthis1000px:containerwidth有一个container，其宽度是其parent宽度的80%，宽度不能超过780px，那么怎么写：.container{max-width:780px;width:80%;}if使用min()函数，可以这样设置最大值，代码简洁很多：.container{max-width:min(80%,780px);}SmoothGradient当在CSS中使用渐变，你可能需要通过颜色之间的过渡更平滑来针对移动设备做一些调整。我们来看一个例子：.element{background:linear-gradient(135deg,#2c3e50,#2c3e5060%,#3498db);}在移动端，这个颜色渐变会有分界线，不太好看.这可以通过媒体查询来解决：@media(max-width:700px){.element{background:linear-gradient(135deg,#2c3e50,#2c3e5025%,#3498db);}}虽然这行得通，但是我们可以使用CSS中的min()函数使这个颜色渐变更加动态：.element{background:linear-gradient(135deg,#2c3e50,#2c3e50min(20vw,60%),#3498db);}这样的颜色渐变看起来平滑了很多：noteexpression中的操作数可以是任意长度值。表达式中的每个值可以使用不同的单位。必要时，也可以使用括号来确定求值顺序。通常需要组合min()和max()值，或者在clamp()或calc()函数中使用min()。如果需要应用多个长度约束，则可以提供两个以上的参数。浏览器兼容性4.max()基本上使用max()函数方法接受一个或多个逗号分隔的表达式作为其参数，具有最大值的表达式的值将用作指定属性的值。max()的实际作用：以包含元素响应上下文的方式设置最小允许值的界限。让我们看一个简单的例子。通常，页面的侧边栏宽度是固定的，而主宽度是灵活的。如果视口足够大，您可以使侧边栏更具动态性以占用更多空间。为此，请使用max()函数设置“最小宽度”。.wrapper{display:flex;}aside{flex-basis:max(30vw,150px);}main{flex-grow:1;}side列的最小宽度为150px，如果视口宽度大于500px(500*30%=150)，最小宽度为30vw。浏览器兼容性参考：https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/https://ishadeed.com/article/css-min-max-clamp/
