學會這些CSS技巧讓你寫樣式更加絲滑
1，前言
記錄一些很好用的css屬性
1，calc()
calc()函式用於動態計算長度值，任何長度值都可以使用calc()函式進行計算，需要注意的是，運算子前後都需要保留一個空格，例如：
.box{
width: calc(100% - 10px)
height: calc(100% - 2rem)
}
相容性
2，min()
min()函式允許你從逗號分隔符表示式中選擇一個最小值作為css的屬性值，例如：
.box{
width: min(1vw, 4em, 80px)
}
在上面的例子中，寬度最多是80px。如果視口的寬度小於800px，或者一個em的寬度小於20px，則會更窄。換句話說，最大寬度是80px。
當min() 用於控制文字大小時，要保證文字足夠大以便於閱讀。建議把 min() 方法嵌入到 max() 中
p{
font-size: max(min(0.5vw, 0.5em), 1rem)
}
這用於保證最小值是1rem，這樣在頁面縮放時文字也會縮放
相容性
3，max()
max()函式讓你可以從一個逗號分隔的表示式列表中選擇最大（正方向）的值作為屬性的值
.box{
width: max(10vw, 4em, 80px)
}
在上面這個例子中，寬度最小會是80px，除非檢視寬度大於800px或者是一個em比20px寬。簡單來說，最小寬度是80px。你也可以認為max()的值提供了一個屬性最小可能的值。
當max()用於控制文字大小時，確保文字總是足夠大以供閱讀。一個建議是使用min()巢狀在 max()中的函式，該函式的第二個值是一個相對長度單位，該單位總是足夠大以讀取
p{
font-size: max(min(0.5vw, 0.5em), 1rem)
}
這確保了1rem的最小大小，如果頁面縮放，文字大小會縮放
相容性
4，clamp()
clamp() 函式的作用是把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的範圍時，在最小值和最大值之間選擇一個值使用。它接收三個引數：最小值、首選值、最大值clamp(MIN, VAL, MAX)，當首選值比最小值要小時，則使用最小值，當首選值介於最小值和最大值之間時，用首選值，當首選值比最大值要大時，則使用最大值，表示式中的每一個值都可以用不同的單位。
.box{
width: clamp(200px, 50vw, 600px)
}
相容性
5，gap
gap屬性是用來設定網格行與列之間的間隙，該屬性是row-gap和column-gap的簡寫形式，適用於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：垂直方向內內容從上到下，水平方向從左到右
sideways-rl：內容垂直方向從上到下排列
sideways-lr：內容垂直方向從下到上排列
相容性
如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END
往期文章
個人主頁
接受失敗，但不選擇放棄！