CSS3常用函数梳理

一、var()

用于插入自定义的属性值。 第一个参数必需，为自定义属性的名称，名称需以 -- 开头；第二个参数可选，为备用值，在属性不存在的时候使用。 实例如下：

:root {
  --main-bg-color: red;
}

body {
  background-color: var(--main-bg-color, blue);
}

二、calc()

用于动态计算长度值。使用注意点：

• 运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
• 任何长度值都可以使用calc()函数进行计算
• calc()函数支持 “+”, “-”, “*”, “/” 运算
• calc()函数使用标准的数学运算优先级规则
• 在less预编译语言中 应该这样使用 width:calc(~“100% - 10px”)

示例如下：

.box{
  width: calc(100% - 10px);
}

// 一般情况下这段代码的意思是，.box元素比父级元素总是小10px

注： 前端应避免使用calc()表达式，因为它的重绘次数非常多，相当影响性能。

三、constant()和env()

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

• safe-area-inset-left：安全区域距离左边边界的距离
• safe-area-inset-right：安全区域距离右边边界的距离
• safe-area-inset-top：安全区域距离顶部边界的距离
• safe-area-inset-bottom ：安全距离底部边界的距离

示例如下：

// 适配底部代码 先constant再env
padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2
padding-bottom: env(safe-area-inset-bottom);//兼容 IOS>11.2

注： env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。