1，前言
記錄一些很好用的css屬性
1，calc()
calc()函數(shù)用于動(dòng)態(tài)計(jì)算長(zhǎng)度值，任何長(zhǎng)度值都可以使用calc()函數(shù)進(jìn)行計(jì)算，需要注意的是，運(yùn)算符前后都需要保留一個(gè)空格，例如：
.box{
width: calc(100% - 10px)
height: calc(100% - 2rem)
}
兼容性
2，min()
min()函數(shù)允許你從逗號(hào)分隔符表達(dá)式中選擇一個(gè)最小值作為css的屬性值，例如：
.box{
width: min(1vw, 4em, 80px)
}
在上面的例子中，寬度最多是80px。如果視口的寬度小于800px，或者一個(gè)em的寬度小于20px，則會(huì)更窄。換句話說，最大寬度是80px。
當(dāng)min() 用于控制文本大小時(shí)，要保證文本足夠大以便于閱讀。建議把 min() 方法嵌入到 max() 中
p{
font-size: max(min(0.5vw, 0.5em), 1rem)
}
這用于保證最小值是1rem，這樣在頁面縮放時(shí)文本也會(huì)縮放
兼容性
3，max()
max()函數(shù)讓你可以從一個(gè)逗號(hào)分隔的表達(dá)式列表中選擇最大（正方向）的值作為屬性的值
.box{
width: max(10vw, 4em, 80px)
}
在上面這個(gè)例子中，寬度最小會(huì)是80px，除非視圖寬度大于800px或者是一個(gè)em比20px寬。簡(jiǎn)單來說，最小寬度是80px。你也可以認(rèn)為max()的值提供了一個(gè)屬性最小可能的值。
當(dāng)max()用于控制文本大小時(shí)，確保文本總是足夠大以供閱讀。一個(gè)建議是使用min()嵌套在 max()中的函數(shù)，該函數(shù)的第二個(gè)值是一個(gè)相對(duì)長(zhǎng)度單位，該單位總是足夠大以讀取
p{
font-size: max(min(0.5vw, 0.5em), 1rem)
}
這確保了1rem的最小大小，如果頁面縮放，文本大小會(huì)縮放
兼容性
4，clamp()
clamp() 函數(shù)的作用是把一個(gè)值限制在一個(gè)上限和下限之間，當(dāng)這個(gè)值超過最小值和最大值的范圍時(shí)，在最小值和最大值之間選擇一個(gè)值使用。它接收三個(gè)參數(shù)：最小值、首選值、最大值clamp(MIN, VAL, MAX)，當(dāng)首選值比最小值要小時(shí)，則使用最小值，當(dāng)首選值介于最小值和最大值之間時(shí)，用首選值，當(dāng)首選值比最大值要大時(shí)，則使用最大值，表達(dá)式中的每一個(gè)值都可以用不同的單位。
.box{
width: clamp(200px, 50vw, 600px)
}
兼容性
5，gap
gap屬性是用來設(shè)置網(wǎng)格行與列之間的間隙，該屬性是row-gap和column-gap的簡(jiǎn)寫形式，適用于Flex，Grid和multi-column布局的元素
#flex {
width: 300px;
display: flex;
gap: 20px 5px;
}
#grid {
height: 200px;
display: grid;
grid-template: repeat(3, 1fr) / repeat(3, 1fr);
gap: 20px 5px;
}
兼容性
6，writing-mode
writing-mode 屬性定義了文本在水平或垂直方向上如何排布。
語法格式如下：
writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
horizontal-tb：水平方向自上而下的書寫方式。即 left-right-top-bottom
vertical-rl：垂直方向自右而左的書寫方式。即 top-bottom-right-left
vertical-lr：垂直方向內(nèi)內(nèi)容從上到下，水平方向從左到右
sideways-rl：內(nèi)容垂直方向從上到下排列
sideways-lr：內(nèi)容垂直方向從下到上排列
兼容性
如果看了覺得有幫助的，我是@鵬多多11997110103，歡迎 點(diǎn)贊 關(guān)注 評(píng)論；
END
往期文章
- 細(xì)數(shù)JS中實(shí)用且強(qiáng)大的操作符&運(yùn)算符
- javaScript中try和catch的使用和跳出forEach循環(huán)
- 使用nvm管理node.js版本以及更換npm淘寶鏡像源
- vue中利用.env文件存儲(chǔ)全局環(huán)境變量，以及配置vue啟動(dòng)和打包命令
- 微信小程序?qū)崿F(xiàn)搜索關(guān)鍵詞高亮
個(gè)人主頁
