weex的css样式相关

阿里提供的UI库

weex引入css的方式

1. 行内样式
2. 内联在vue文件的style标签中

   <style>  
       html{    
           background-color: #f00;  
       }
   </style>
   复制代码

3. 利用style标签的src属性导入

   <style src='./Home.css'></style>
   复制代码

4. import导入

   <style scoped> 
       @import url('./Home.css');
   </style>复制代码

weex中的css限制

有关css的一些样式编辑限制请去 官网查看，这里简单描述下：

1. border和background不支持组合写法，必须分开编辑，<div>标签和<text>标签不支持background-image属性

2. 只支持像素值，不支持相对值，适配以750像素为标准

3. weex支持position定位:relative | absolute |fixed |sticky ，默认值是relative

4. weex不支持z-index设置元素层级关系，但是靠后的元素层级越高

5. 如果定位元素超过容器边界，在Android下，超出部分将不可见，原因在于在Android端元素overflow默认值为hidden，且overflow没有其他值。

6. 支持线性渐变：linea-gradient，不支持径向渐变：radius-gradient

7. weex中box-shadow仅仅支持ios

8. ios中image组件无法定义一个或多个角的border-radius，只能直接使用border-radius定义圆角，Android可随意定义

9. weex中，flexbox是默认并且唯一的布局模型，每个元素都默认拥有display:flex属性

10. Weex 盒模型的 box-sizing 默认为 border-box

11. 标准css有多种选择器，但weex中只支持单个class name 选择器或者id选择器，尽量选择类选择器

12. 子元素的样式不会继承自父元素，比如color和font-size等样式作用在<text>标签的上层<div>是无效的。

13. 文字必须放在<text>标签中，不可以直接放在<div>标签中

14. <text>标签，有个lines样式，用于限制文本行数，并出现省略号，但是lines:1必须放在css里面，不能放在作为属性放在<text>标签中，类似这样<text lines:"2"></text>，这样不生效。

15. <input>标签，必须带结束符，网页端浏览无法聚焦没关系，因为模拟器不支持；必须编辑<input>标签的高度，否则聚焦光标会不显示。