适配 iphone 底部刘海

在需要适配的页面，元素增加样式。特有的变量safe-area-inset-bottom \ safe-area-inset-bottom

建议这种通用性设置，提供一个基础公共组件page. 通过定义插槽 nav \ header \ main \ footer 插入内容。这是一些公共的样式就不用每个页面去设置。

.footer {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom);// IOS <11.2
    padding-bottom: env(safe-area-inset-bottom);// iso >11.2
    // 安全距离设置后，一定要设置背景，不然滚动的内容在下方可以看到
    background-color: #fff;
}