- env()和constant()，这两个方法是什么？
是苹果官方推出适配方案css函数env()、constant()来适配的，是IOS11新增特性，webkit的css函数。 - 作用是什么？？
是用来设定安全区域与边界的距离。
在实际使用上，是用来针对IOS的底部小黑条做适配（就我而言），所以当前只需要关注safe-area-inset-bottom这个值。 - 参数有哪些呢：
safe-area-inset-step、safe-area-inset-right、safe-area-inset-bottom、safe-area-inset-left
safe-area-inset-*由四个定义了视口边缘内矩形的top、right、bottom、left的环境变量组成，这样可以安全放入内容。
safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离
注意的是，它不同于其他的CSS属性，用户代理定义的属性名对大小写敏感
- 用法
env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效，其次是小程序里的viewport-fit默认是cover
还有一点就是，在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了；所以为了做兼容，也要把constant()函数用上
<!-- 首先在head标签中设置viewport -->
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
</head>
/* 同时设置env和constant代码，同样env()和constant()需要同时存在，而且顺序不能换。 */
/* 可以通过增加padding-bottom来适配 */
.content{
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
}
/* 可以通过margin-bottom来适配 */
.content2{
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
/* 或者改变高度*/
.content3{
height: calc(50px + constant(safe-area-inset-bottom));
height: calc(50px + env(safe-area-inset-bottom));
}
语法：
/* 用一个参数 */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
/* 两个参数，设置了第二个可选参数（备用值），当safe-area-inset-*不生效时，就用使用备用值 */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);
