惠新西街网站建设城市网站建设意义

CSS/CSS3 变量var()函数和calc()函数计算的使用

var()变量
var变量的定义语法 : --变量名 (两个短横线加上变量名)

calc() 函数计算
calc使用的时候有几个地方需要注意:
1. 运算符前后都需要保留一个空格
2. 任何长度值都可以使用calc()函数进行计算；
3. 支持 + - * / 运算；
4. 使用标准的数学运算优先级规则；

例如
在body中定义:
body{
    --width : 100px;
    --height : 100px;
    --color : red;
    --fontSize : 18px;
}

在标签中使用:
div{
    width: var(--width);
    height: var(--height);
    line-height: var(--height);
    color: var(--bgColor);
    font-size: calc(var(--fontSize) + 8px);
}