env(safe-area-inset-x); iphone 安全区域
微信小程序也支持哟，网页端需要配合meta标签：<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
- safe-area-inset-left 左边安全距离
- safe-area-inset-right 右边安全距离
- safe-area-inset-top 顶部安全距离
- safe-area-inset-bottom 底部安全距离
calc(); 计算函数
如上面设置安全区域的栗子。如果不使用计算属性，可能我们需要嵌套两层标签，父标签设置padding-bottom: 10rpx;子标签再设置安全区域padding-bottom: env(safe-area-inset-bottom)。但有了这个函数后，我们不再各种嵌套，直接就是padding-bottom: calc(10rpx + env(safe-area-inset-bottom))
min(); 支持一个或多个表达式
举个栗子：一个div的宽度是屏幕的一半，但是最小不能小于200px。与其用媒介查询写一大坨代码，不如直接使用这个属性干净利落，width: min(50%, 200px)；当父节点小于400px时，50%不再生效，宽度固定位200px
max(); 支持一个或多个表达式
跟min类似，继续拿上面的栗子，width: max(50%, 200px); 当父节点大于400px时，50%不再生效，宽度固定位200px
clamp(); 接收三个表达式
直接举例：一个div的宽度是屏幕的一半，但要保证它最小不能小于200px;最大不能大于600px。width:clamp(200px, 50%, 600px)
设置一个元素宽高为1:1
很常见的一个布局，比如一个图片列表，图片为1:1，宽度自适应。则我们无需理会宽度是多少,利用伪元素直接写高度即可 div::before{content: ''; display: block; padding-top: 100%;}
