css :root、var()、calc() 函数
:root
:root {background:#ccc;}
css 伪类匹配文档的根元素。
对于 HTML 来说, :root 表示<html>元素,除了优先级更高之外,与 html 选择器相同。
非IE及ie8及以上浏览器都支持,在:root中声明相当于全局属性,只要当前页面引用了:root segment所在文件,都可以使用var()来引用
var()
:root { --main-bg-color: coral;} #div1 { background-color: var(--main-bg-color);} #div2 { background-color: var(--main-bg-color);}
var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。(这样做通常会产生无效的语法或者一个没有关联到变量的值。)
calc()
函数用于动态计算长度值。
#div1 {position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; padding: 5px; text-align: center;}
需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算;
calc()函数支持 "+", "-", "*", "/" 运算;
calc()函数使用标准的数学运算优先级规则;