建站
咨詢
售后
建站咨詢
新聞中心
calc()
CSS 的 calc 函數(shù)非常實(shí)用，很多情況下，我們都會(huì)用到這個(gè)函數(shù)。
成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、成都網(wǎng)站建設(shè)公司、微信開發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站制作等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：除甲醛等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致贊揚(yáng)！
calc 函數(shù)支持加減乘除四種運(yùn)算，但是，它也有限制：
- 運(yùn)算符前后帶有單位或者百分比的數(shù)值，只能進(jìn)行加減，不能進(jìn)行乘除運(yùn)算；比如：width:calc(100px / 50%)，這就是不合法的；
- 不能使用當(dāng)前屬性不支持?jǐn)?shù)據(jù)單位，比如：width:calc(100% - 45deg)，width 屬性不支持 deg 單位，因此這樣寫法是錯(cuò)誤的；
- calc 函數(shù)在進(jìn)行除法運(yùn)算的時(shí)候，除數(shù)不能為 0【也就是除號(hào)右邊不能為 0】，比如：width:calc(100px / 0)，這樣的寫法是的；
- calc 函數(shù)里面的運(yùn)算符號(hào)兩邊一定有空，才能進(jìn)行運(yùn)算【乘法和除法沒(méi)有這個(gè)限制，但是為了格式一致，要養(yǎng)成好習(xí)慣，都加上空格】；
這就是 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()
min()函數(shù)的具體語(yǔ)法為：min(expression[, expression])。
min 函數(shù)支持一個(gè)或者多個(gè)表達(dá)式，多個(gè)表達(dá)式的時(shí)候，用都好隔開，最后返回最小值，比如：width: min(100px, 230px, 20px)，屬性 width 的結(jié)果為 20 px。
max()函數(shù)和 min 函數(shù)語(yǔ)法相似，不同的是 max 函數(shù)返回最大值。
clamp()函數(shù)
clamp 函數(shù)返回的是一個(gè)區(qū)間范圍數(shù)值，寫法是這樣：clamp(min, value, max)
min 表示最小值；value 表示首選值；max 表示最大值。clamp 函數(shù)的返回值結(jié)果有這幾種：
- 如果value 的值 min~max 之間，那么 clamp 返回 value；
- 如果 value 大于 max，則返回 max；
- 如果 value 小于 min，則返回 min
比如這個(gè)頁(yè)面：
Title
這個(gè)頁(yè)面中 clamp 函數(shù)中 value 小于 min 的值，所以頁(yè)面中按鈕的 width 為 200px。
button {
width: clamp(200px, 50vw, 600px);
}這樣按鈕的長(zhǎng)度就為 600px 了。有機(jī)會(huì)我們可以在項(xiàng)目中嘗試一下這些新屬性和新的寫法。
當(dāng)前標(biāo)題：CSS這幾個(gè)函數(shù)很實(shí)用，也很簡(jiǎn)單
標(biāo)題來(lái)源：http://m.5511xx.com/article/cohoohh.html
