css 相关
最后更新于：2022-04-02 03:36:54
[TOC]
## css的变化
### 设置页面的背景
`page`相当于`body`节点
```
page {
background-color: red;
}
```
## CSS变量
| CSS变量 | 描述 | App | 小程序 | H5 |
| --- | --- | --- | --- | --- |
| \--status-bar-height | 系统状态栏高度 | [系统状态栏高度](http://www.html5plus.org/doc/zh_cn/navigator.html#plus.navigator.getStatusbarHeight)、nvue注意见下 | 25px | 0 |
| \--window-top | 内容区域距离顶部的距离 | 0 | 0 | NavigationBar 的高度 |
| \--window-bottom | 内容区域距离底部的距离 | 0 | 0 | TabBar 的高度 |
注意:
1. var(--status-bar-height) 此变量在微信小程序环境为固定 25px，在 App 里为手机实际状态栏高度
2. 当设置 "navigationStyle":"custom" 取消原生导航栏后，由于窗体为沉浸式，占据了状态栏位置。此时可以使用一个高度为 var(--status-bar-height) 的 view 放在页面顶部，避免页面内容出现在状态栏
示例
```
状态栏下的文字
```
';