css 计算值函数

Posted 2021-11-26 amiezhang

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>