AVt天堂网 手机版,亚洲va久久久噜噜噜久久4399,天天综合亚洲色在线精品,亚洲一级Av无码毛片久久精品

當(dāng)前位置：首頁 > 科技  > 軟件

CSS這幾個函數(shù)很實用，也很簡單

來源： 責(zé)編： 時間：2023-11-08 09:10:15 274觀看
導(dǎo)讀calc()CSS 的 calc 函數(shù)非常實用，很多情況下，我們都會用到這個函數(shù)。calc 函數(shù)支持加減乘除四種運算，但是，它也有限制：運算符前后帶有單位或者百分比的數(shù)值，只能進(jìn)行加減，不能進(jìn)行乘除運算；比如：width:calc(100px / 50%)，這就是

calc()

CSS 的 calc 函數(shù)非常實用，很多情況下，我們都會用到這個函數(shù)。WCC28資訊網(wǎng)——每日最新資訊28at.com

calc 函數(shù)支持加減乘除四種運算，但是，它也有限制：WCC28資訊網(wǎng)——每日最新資訊28at.com

  1. 運算符前后帶有單位或者百分比的數(shù)值，只能進(jìn)行加減，不能進(jìn)行乘除運算；比如：width:calc(100px / 50%)，這就是不合法的；
  2. 不能使用當(dāng)前屬性不支持?jǐn)?shù)據(jù)單位，比如：width:calc(100% - 45deg)，width 屬性不支持 deg 單位，因此這樣寫法是錯誤的；
  3. calc 函數(shù)在進(jìn)行除法運算的時候，除數(shù)不能為 0【也就是除號右邊不能為 0】，比如：width:calc(100px / 0)，這樣的寫法是?的；
  4. calc 函數(shù)里面的運算符號兩邊一定有空，才能進(jìn)行運算【乘法和除法沒有這個限制，但是為了格式一致，要養(yǎng)成好習(xí)慣，都加上空格】；

這就是 calc 函數(shù)的基本使用方法，在 CSS 還有幾個函數(shù)：min()、max()和 clamp()函數(shù)。在不能保證目標(biāo)用戶的瀏覽器是否支持這些函數(shù)的時候，就使用固定值兜底，確保在舊版本的瀏覽器中樣式不亂。比如：WCC28資訊網(wǎng)——每日最新資訊28at.com

html{    font-size: 16px;    font-size: clamp(16px, calc(16px + 2 * (100vw - 400px) / 40), 24px)}

min()

min()函數(shù)的具體語法為：min(expression[, expression])。WCC28資訊網(wǎng)——每日最新資訊28at.com

min 函數(shù)支持一個或者多個表達(dá)式，多個表達(dá)式的時候，用都好隔開，最后返回最小值，比如：width: min(100px, 230px, 20px)，屬性 width 的結(jié)果為 20 px。WCC28資訊網(wǎng)——每日最新資訊28at.com

max()函數(shù)和 min 函數(shù)語法相似，不同的是 max 函數(shù)返回最大值。WCC28資訊網(wǎng)——每日最新資訊28at.com

clamp()函數(shù)

clamp 函數(shù)返回的是一個區(qū)間范圍數(shù)值，寫法是這樣：clamp(min, value, max)WCC28資訊網(wǎng)——每日最新資訊28at.com

min 表示最小值；value 表示首選值；max 表示最大值。clamp 函數(shù)的返回值結(jié)果有這幾種：WCC28資訊網(wǎng)——每日最新資訊28at.com

  1. 如果value 的值 min~max 之間，那么 clamp 返回 value；
  2. 如果 value 大于 max，則返回 max；
  3. 如果 value 小于 min，則返回 min

比如這個頁面：WCC28資訊網(wǎng)——每日最新資訊28at.com

<!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 函數(shù)中 value 小于 min 的值，所以頁面中按鈕的 width 為 200px。WCC28資訊網(wǎng)——每日最新資訊28at.com

button {    width: clamp(200px, 50vw, 600px);}

這樣按鈕的長度就為 600px 了。有機(jī)會我們可以在項目中嘗試一下這些新屬性和新的寫法。WCC28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-17639-0.htmlCSS這幾個函數(shù)很實用，也很簡單

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： Springboot之把外部依賴包納入Spring容器管理的兩種方式

下一篇： 探索人工智能的世界：構(gòu)建智能問答系統(tǒng)之前置篇

標(biāo)簽：
  • 熱門焦點
Top