CSS3计算样式 calc()_css样式计算

calc() 计算

var() 引用变量  --varxxx

:root{

--globalVarxx:100px;            申明 html全局变量

}

:root{
    --windowW:1000px;
    --windowH:1000px;
}
.father{
    width: var(--windowW);
    height: calc(var(--windowH)-100px);
}

:root{}
可以在一个CSS文件中定义全局变量，供多个属性引用。

var()
var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

calc()
calc() 函数用于动态计算长度值。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
任何长度值都可以使用calc()函数进行计算；
calc()函数支持 "+", "-", "*", "/" 运算；
calc()函数使用标准的数学运算优先级规则
 

https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

calc()

calc() 此 CSS 函数允许在声明 CSS 属性值时执行一些计算。它可以用在如下场合：<length>、<frequency>, <angle>、<time>、<percentage>、<num