Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
小浣熊撸代码
uni-app
提交
e31543e4
U
uni-app
项目概览
小浣熊撸代码
/
uni-app
与 Fork 源项目一致
Fork自
DCloud / uni-app
通知
1
Star
1
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
1
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
uni-app
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
1
Issue
1
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
e31543e4
编写于
5月 18, 2021
作者:
study夏羽
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update nvue样式文档
上级
f213dfa4
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
10 addition
and
70 deletion
+10
-70
docs/nvue-css.md
docs/nvue-css.md
+10
-70
未找到文件。
docs/nvue-css.md
浏览文件 @
e31543e4
...
@@ -5,18 +5,15 @@
...
@@ -5,18 +5,15 @@
### 注意事项
### 注意事项
-
nvue的css
**仅支持flex布局**
,是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面,只是写法需要适应。
-
nvue的css
**仅支持flex布局**
,是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面,只是写法需要适应。
-
在选择器方面支持的较少,只支持简单的
```class="classA"```
。
-
class 进行绑定时只支持数组语法。
-
class 进行绑定时只支持数组语法。
-
不支持媒体查询
-
不支持媒体查询
-
不支持 class 以外的选择器
-
不支持组合选择器(3.1.0+ 开始支持)
-
不支持简写样式(3.1.0+ 开始支持)
-
不能在 style 中引入字体文件
-
不能在 style 中引入字体文件
-
布局不能使用百分比,如
```width:100%```
;
-
不能使用百分比布局,如
`width:100%`
-
有些web的css属性在nvue里无法支持,比如背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
-
不支持在css里写背景图
`background-image`
,但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念
-
nvue 的各组件在安卓端默认是透明的,如果不设置
```background-color```
,可能会导致出现重影的问题
-
使用
`image`
标签,支持使用base64
-
文字内容,必须只能在
```text```
组件下,
```text```
组件不能换行写内容,否则会出现无法去除的周边空白
-
nvue 的各组件在安卓端默认是透明的,如果不设置
`background-color`
,可能会导致出现重影的问题
-
只有
```text```
标签可以设置字体大小,字体颜色
-
文字内容,必须只能在
`text`
组件下,
`text`
组件不能换行写内容,否则会出现无法去除的周边空白
-
只有
`text`
标签可以设置字体大小,字体颜色
**HBuilderX 3.1.0+ 开始支持更多简写样式**
**HBuilderX 3.1.0+ 开始支持更多简写样式**
...
@@ -53,81 +50,24 @@
...
@@ -53,81 +50,24 @@
.class
{}
.class
{}
```
```
-
仅支持单个选择器(3.1.0+ 开始支持组合选择器)
```
css
/* 错误 */
.a
.b
.c
{}
.a
>
.b
{}
/* 正确 */
.class
{}
```
-
不支持简写样式(3.1.0+ 开始支持更多简写样式)
```
css
/* 错误 */
.class
{
border
:
1px
red
solid
;
}
/* 正确 */
.class
{
border-width
:
1px
;
border-style
:
solid
;
border-color
:
red
;
}
/* 错误 */
.class
{
background
:
red
;
}
/* 正确 */
.class
{
background-color
:
red
;
}
```
-
nvue的
```uni-app```
编译模式下,App.vue 中的样式,会编译到每个 nvue文件。对于共享样式,如果有不合法属性控制台会给出警告,可以通过
[
条件编译
](
https://uniapp.dcloud.io/platform
)
```APP-PLUS-NVUE```
屏蔽 App 中的警告。
-
nvue的
```uni-app```
编译模式下,App.vue 中的样式,会编译到每个 nvue文件。对于共享样式,如果有不合法属性控制台会给出警告,可以通过
[
条件编译
](
https://uniapp.dcloud.io/platform
)
```APP-PLUS-NVUE```
屏蔽 App 中的警告。
```
css
/* 错误 */
/* 控制台警告:
WARNING: `border` is not a standard property name (may not be supported)
WARNING: `-webkit-transform` is not a standard property name (may not be supported)
*/
.class
{
border
:
1px
red
solid
;
-webkit-transform
:
scaleY
(
.5
);
}
/* 正确 */
.class
{
border-width
:
1px
;
border-style
:
solid
;
border-color
:
red
;
/* #ifndef APP-PLUS-NVUE */
-webkit-transform
:
scaleY
(
.5
);
/* #endif*/
}
```
## 盒模型
## 盒模型
nvue盒模型基于 CSS 盒模型,每个 nvue 元素都可视作一个盒子。我们一般在讨论设计或布局时,会提到「盒模型」这个概念。
nvue盒模型基于 CSS 盒模型,每个 nvue 元素都可视作一个盒子。我们一般在讨论设计或布局时,会提到「盒模型」这个概念。
盒模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界
`
``margin edge```
, 边框边界
```border edge```
, 内边距边界
```padding edge```
与内容边界
```content edge``
`
。这四层边界,形成一层层的盒子包裹起来,这就是盒模型大体上的含义。
盒模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界
`
margin edge`
, 边框边界
`border edge`
, 内边距边界
`padding edge`
与内容边界
`content edge
`
。这四层边界,形成一层层的盒子包裹起来,这就是盒模型大体上的含义。
![
图片描述文字
](
https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/ec4f2810-2fec-11eb-899d-733ae62bed2f.png
)
![
图片描述文字
](
https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-dc-site/ec4f2810-2fec-11eb-899d-733ae62bed2f.png
)
> nvue盒模型的 `
``box-sizing``` 默认为 ```border-box``
`,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度。
> nvue盒模型的 `
box-sizing` 默认为 `border-box
`,即盒子的宽高包含内容、内边距和边框的宽度,不包含外边距的宽度。
> 在 Android 平台,nvue只支持 `
``overflow:hidden``
`。
> 在 Android 平台,nvue只支持 `
overflow:hidden
`。
> 在 iOS 上,nvue支持 `
``overflow:hidden``` 和 ```overflow:visible```,默认是 ```overflow:visible``
`。
> 在 iOS 上,nvue支持 `
overflow:hidden` 和 `overflow:visible`,默认是 `overflow:visible
`。
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录