CSS 的 calc 函數(shù)非常實(shí)用，很多情況下，我們都會(huì)用到這個(gè)函數(shù)。
calc 函數(shù)支持加減乘除四種運(yùn)算，但是，它也有限制：
這就是 calc 函數(shù)的基本使用方法，在 CSS 還有幾個(gè)函數(shù)：min()、max()和 clamp()函數(shù)。在不能保證目標(biāo)用戶的瀏覽器是否支持這些函數(shù)的時(shí)候，就使用固定值兜底，確保在舊版本的瀏覽器中樣式不亂。比如：
html{ font-size: 16px; font-size: clamp(16px, calc(16px + 2 * (100vw - 400px) / 40), 24px)}min()函數(shù)的具體語(yǔ)法為：min(expression[, expression])。
min 函數(shù)支持一個(gè)或者多個(gè)表達(dá)式，多個(gè)表達(dá)式的時(shí)候，用都好隔開(kāi)，最后返回最小值，比如：width: min(100px, 230px, 20px)，屬性 width 的結(jié)果為 20 px。
max()函數(shù)和 min 函數(shù)語(yǔ)法相似，不同的是 max 函數(shù)返回最大值。
clamp 函數(shù)返回的是一個(gè)區(qū)間范圍數(shù)值，寫(xiě)法是這樣：clamp(min, value, max)
min 表示最小值；value 表示首選值；max 表示最大值。clamp 函數(shù)的返回值結(jié)果有這幾種：
比如這個(gè)頁(yè)面：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> button { width: clamp(200px, 50px, 600px); } </style></head><body><button>按鈕長(zhǎng)度</button></body></html>這個(gè)頁(yè)面中 clamp 函數(shù)中 value 小于 min 的值，所以頁(yè)面中按鈕的 width 為 200px。
button { width: clamp(200px, 50vw, 600px);}這樣按鈕的長(zhǎng)度就為 600px 了。有機(jī)會(huì)我們可以在項(xiàng)目中嘗試一下這些新屬性和新的寫(xiě)法。
本文鏈接：http://www.www897cc.com/showinfo-26-17639-0.htmlCSS這幾個(gè)函數(shù)很實(shí)用，也很簡(jiǎn)單
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)