css 函数

css还有一些强大的函数：

1. calc

可以混合多种单位来计算

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

2. max、min、clamp

max、min选最大/小的那个

clamp() 则是给一个值限定一个范围，超出范围外则使用范围的最大或者最小值。

遗憾的是没有浏览器支持

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>

div:before {
    content:attr(data-name)" "attr(title);
}