css也有函数?好吧,我孤陋寡闻了。这里记录一下学习情况。
calc()函数
定义:用于动态计算长度值
支持版本:css3
- 运算符前后都需要保留一个空格,例如: calc(100% - 10px);
- 任何长度值都可以使用calc()函数进行计算
- 支持"+","-","*","/"运算,使用标准的数学运算优先级规则
支持浏览器:
函数 | 谷歌 | edge | 火狐 | safari | o |
calc() |
26.0 19.0 -webkit- |
9.0 |
16.0 4.0 -moz- |
7.0 6.0 -webkit- |
15.0 |
举例代码:
#div1 { position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; padding: 5px; text-align: center; }
attr()函数
定义:返回选择元素的属性值
支持版本:css2
支持浏览器:
函数 | 谷歌 | edge | 火狐 | safari | o |
attr() | 2.0 | 3.0 | 1.0 | 3.0 | 9.0 |
举例代码:
a:after { content: "(" attr(href) ")"; }
参考教程: