CSS這幾個函數很實用，也很簡單
作者：青竹悅
calc 函數的基本使用方法，在 CSS 還有幾個函數：min()、max()和 clamp()函數。在不能保證目標用戶的瀏覽器是否支持這些函數的時候，就使用固定值兜底，確保在舊版本的瀏覽器中樣式不亂。
calc()
CSS 的 calc 函數非常實用，很多情況下，我們都會用到這個函數。
calc 函數支持加減乘除四種運算，但是，它也有限制：
- 運算符前后帶有單位或者百分比的數值，只能進行加減，不能進行乘除運算；比如：width:calc(100px / 50%)，這就是不合法的；
- 不能使用當前屬性不支持數據單位，比如：width:calc(100% - 45deg)，width 屬性不支持 deg 單位，因此這樣寫法是錯誤的；
- calc 函數在進行除法運算的時候，除數不能為 0【也就是除號右邊不能為 0】，比如：width:calc(100px / 0)，這樣的寫法是?的；
- calc 函數里面的運算符號兩邊一定有空，才能進行運算【乘法和除法沒有這個限制，但是為了格式一致，要養成好習慣，都加上空格】；
這就是 calc 函數的基本使用方法，在 CSS 還有幾個函數：min()、max()和 clamp()函數。在不能保證目標用戶的瀏覽器是否支持這些函數的時候，就使用固定值兜底，確保在舊版本的瀏覽器中樣式不亂。比如：
html{
font-size: 16px;
font-size: clamp(16px, calc(16px + 2 * (100vw - 400px) / 40), 24px)
}min()
min()函數的具體語法為：min(expression[, expression])。
min 函數支持一個或者多個表達式，多個表達式的時候，用都好隔開，最后返回最小值，比如：width: min(100px, 230px, 20px)，屬性 width 的結果為 20 px。
max()函數和 min 函數語法相似，不同的是 max 函數返回最大值。
clamp()函數
clamp 函數返回的是一個區間范圍數值，寫法是這樣：clamp(min, value, max)
min 表示最小值；value 表示首選值；max 表示最大值。clamp 函數的返回值結果有這幾種：
- 如果value 的值 min~max 之間，那么 clamp 返回 value；
- 如果 value 大于 max，則返回 max；
- 如果 value 小于 min，則返回 min
比如這個頁面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
button {
width: clamp(200px, 50px, 600px);
}
</style>
</head>
<body>
<button>按鈕長度</button>
</body>
</html>這個頁面中 clamp 函數中 value 小于 min 的值，所以頁面中按鈕的 width 為 200px。
button {
width: clamp(200px, 50vw, 600px);
}這樣按鈕的長度就為 600px 了。有機會我們可以在項目中嘗試一下這些新屬性和新的寫法。
責任編輯：武曉燕
來源：
讀心悅
