css 計算值函數

css有一些強大的函數：

1. calc

可以混合多種單位來計算

div {
    font-size: calc(100vw/5 + 1rem - 100px)
}

 

2. max、min、clamp

max、min選最大/小的那個

clamp() 則是給一個值限定一個范圍，超出范圍外則使用范圍的最大或者最小值。（現在帶webkit前綴可以使用）

div{
    width:max(10% + 20px, 300px);
}

 

3.toggle

toggle() 函數在規則選中多於一個元素時生效，它會在幾個值之間來回切換，比如我們要讓一個列表項的樣式圓點和方點間隔出現，可以使用下面代碼：

ul { 
    list-style-type: toggle(circle, square); 
}

 

4.attr

用來獲取元素的屬性值，目前只能在content處使用

<div data-name="abc" title="123"></div>

<style>    
　　div:before { content:attr(data-name)" "attr(title); }
</style>