diff --git a/docs/nvue-css.md b/docs/nvue-css.md index 21f7e88c68a5a8fa2a351fb73101aefae769256d..f1e41242ec5d7babcb1cc791d17d1ce13e1dc648 100644 --- a/docs/nvue-css.md +++ b/docs/nvue-css.md @@ -5,18 +5,15 @@ ### 注意事项 - nvue的css**仅支持flex布局**,是webview的css语法的子集。这是因为操作系统原生排版不支持非flex之外的web布局。当然flex足以排布出各种页面,只是写法需要适应。 -- 在选择器方面支持的较少,只支持简单的```class="classA"```。 - class 进行绑定时只支持数组语法。 - 不支持媒体查询 -- 不支持 class 以外的选择器 -- 不支持组合选择器(3.1.0+ 开始支持) -- 不支持简写样式(3.1.0+ 开始支持) - 不能在 style 中引入字体文件 -- 布局不能使用百分比,如```width:100%```; -- 有些web的css属性在nvue里无法支持,比如背景图。但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念 -- nvue 的各组件在安卓端默认是透明的,如果不设置```background-color```,可能会导致出现重影的问题 -- 文字内容,必须只能在```text```组件下,```text```组件不能换行写内容,否则会出现无法去除的周边空白 -- 只有```text```标签可以设置字体大小,字体颜色 +- 不能使用百分比布局,如`width:100%` +- 不支持在css里写背景图`background-image`,但可以使用image组件和层级来实现类似web中的背景效果。因为原生开发本身也没有web这种背景图概念 +- 使用`image`标签,支持使用base64 +- nvue 的各组件在安卓端默认是透明的,如果不设置`background-color`,可能会导致出现重影的问题 +- 文字内容,必须只能在`text`组件下,`text`组件不能换行写内容,否则会出现无法去除的周边空白 +- 只有`text`标签可以设置字体大小,字体颜色 **HBuilderX 3.1.0+ 开始支持更多简写样式** @@ -53,81 +50,24 @@ .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 中的警告。 -```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 元素都可视作一个盒子。我们一般在讨论设计或布局时,会提到「盒模型」这个概念。 -盒模型描述了一个元素所占用的空间。每一个盒子有四条边界:外边距边界 ```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) -> 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`。