前言
css中有将近102個函數，但是我們所掌握的大概又有多少呢？今天我們先來介紹其中的數學函數，數學函數大概有：
- 基本算術：calc()
- 比較函數：min()、max()和clamp()
- 階梯值函數：round()、mod()和rem()
- 三角函數：sin()、cos()、tan()、asin()、acos()、atan()和atan2()
- 指數函數：pow()、sqrt()、hypot()、log()、exp()
- 符号相關函數：abs() , sign()
除了這些函數，還有常量是需要記住的：
e , pi，infinity，-infinity，NaN
常量
- e是自然對數的底，約等于 2.7182818284590452354
- pi是圓的周長與其直徑的比值，大約等于 3.1415926535897932。
- infinity 代表無窮大，值為 +∞
- -infinity 代表無窮小，值為 −∞
- NaN值為 NaN
基本算數-calc
calc是英文單詞calculate(計算)的縮寫，它可以動态計算長度值。
他允許執行基本的算術運算，+），減（- ），乘（*），除（/），和括号。注意》》》 運算符和參數之間要有空格
他也支援文字長度，例如1px ,2em，同時還支援 計算結果是有效參數類型（例如）的 其他數學函數或其他表達式，例如attr()，其。
運算符的标準數學優先級規則适用：calc(2 + 3 * 4) 等于14，而不是20。
括号可用于操縱優先級：calc((2 + 3) * 4)改為等于20。等價于calc(calc(2 + 3) * 4)
舉例
div {
float: left;
border: solid 1px;
width: calc(100% / 3 - 2 * 1em - 2 * 1px);
height:100px;
} 我們算一下寬高是如何計算出來的。
102=100+上下border
429.32=1384/3-32-2+左右border
比較函數-min()
min() CSS 方法允許你從逗号分隔符表達式中選擇一個最小值作為 CSS 的屬性值。min() 方法可以用于以下任何屬性中 , , , , ,, 或者 。
同時基本的算術運算，(+），減（- ），乘（*），除（/），和括号。
他也支援文字長度，例如1px ,2em，同時還支援 計算結果是有效參數類型（例如）的 其他數學函數或其他表達式，例如calc()，其。
min()是用來限制元素的最大值，類似于max-width/height
類似下面的文法都是支援的：
width: min(5px * 10, 1em);
width: min(calc(5px * 10), 1em);
width: min(5px * 10, var(--width)，20em,10px,......); div {
float: left;
border: solid 1px;
width: min(100px,10em,10vw);
height:100px;
} 在移動裝置Iphone下，最終元素的寬度隻有39.53，
來計算一下：
首先min(100px,10em,10vw)換算成同一個機關的結果是
min(100px，160px,37.5px),
=》最小值就是37.5px,
=》元素寬度也就是37.5px加上兩個border，也就是39.5，
=》是以說width最大寬度就是37.5，不會是10px或者160px
在視窗寬度1384px的情況下:最終元素的寬度隻有102px。
比較函數-max()
width: min(5px * 10, 1em);
width: min(calc(5px * 10), 1em);
width: min(5px * 10, var(--width)，20em,10px,......); div {
float: left;
border: solid 1px;
width: min(100px,10em,10vw);
height:100px;
} 在視窗寬度1384px的情況下:最終元素的寬度隻有162px。
首先max(100px,10em,10vw)換算成同一個機關的結果是
max(100px，160px,138.4px),
=》最大值就是160px,
=》元素寬度也就是160px加上兩個border，也就是163px，
=》是以說width最小寬度就是160。
在移動裝置Iphone下，最終元素的寬度也是162px，
比較函數-clamp()
clamp數有三個計算-最小值，中間值，和最大值=
clamp(min, val, max)
傳回結果
有點像夾逼定理，仔細看注釋了解
if（min<val&& val < max ）{
return val
}
if（val<min）{
// clamp( val,min, max),變成了中間值，是以傳回中間值
return min
}
if（val> max ）{
return max
} 視窗寬度是1400px的。
div {
float: left;
border: solid 1px;
width: clamp(100px,10em,10vw);
height:100px;
} clamp(100px,10em,10vw) 等價于clamp(100px,160px,140px)
最終的傳回結果是：140px
元素的寬度：140px+左右兩個border=142