weex通⽤样式以及需要注意的问题
⼀、说明
weex 对于 css 样式的⽀持是⾮常有限的，并且使⽤样式的时候，必须遵循 weex 定义的规则。
对于不遵循 weex 样式规则的代码，往往在 web 页⾯上有效，⽽在 native 环境没有任何作⽤。
weex 官⽅⽂档中，有专门的样式介绍：
⼆、通⽤样式
1、单位
weex 中，单位必须使⽤ px，其他都不⽀持，⽽且通常窗⼝宽度为 750px，在不同的平台会进⾏相应的计算。
⽐如在 web 中，会转换成 em。
因为 native 开发中，是必须定宽⾼的，所以和 web 开发中很多概念是不相同的。
2、样式不会传递
weex 中，native 环境的属性样式不会传递给⼦元素。
⽐如在
中设置的 text-align:center;，⽆法作⽤到其 ⼦元素，必须在 使⽤ text-align。
如
不能直接写⽂字内容，及 不能有⼦节点这种约束，需要详细的去了解官⽅⽂档的内置组件部分。
3、盒模型
盒模型默认是使⽤ box-sizing:border-box，盒模型中需要注意的很⼤部分是属性样式的简写是不⽀持的，必须要分开来写。
1）margin
margin 是所有组件都⽀持的样式，但是设置样式的时候，不能使⽤简写如 margin:10px; 的形式，必须分开使⽤，默认值都是 0：
margin-top:10px
margin-bottom:10px
margin-right:10px
margin-left:10px
2）padding
padding 样式同样不能使⽤简写，必须分开说明，默认值都是 0：
padding-top:10px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
3) border
border 不⽀持 border:1px solid #cccccc 形式的简写，需要分开说明。
使⽤ border 实现的三⾓形，在 native 环境中是不起作⽤的，即使样式分开写了，也是不起作⽤，weex 环境中使⽤三⾓形，建议使⽤svg
border-style：solid | dashed | dotted
更加细化的写法：
border-left-style
border-right-style
border-top-style
border-bottom-style
border-width：边框宽度，默认为 0
更加细化的写法：
border-left-width
border-right-width
border-top-width
border-bottom-width
border-radius：边框弧度，默认为 0
更加细化的写法：
border-bottom-left-radius
border-bottom-right-radius
border-top-left-radius
border-top-right-radius
border-color：边框颜⾊，默认 #000000
更加细化的写法：
border-right-color:
border-left-color:
border-top-color:
border-bottom-color:
4、flexbox
weex 默认的布局模型就是 flexbox，因此其组件本⾝就是 display:flex，不需要再次声明。
weex 的 flexbox 模型的默认 flex-direction 是 column，如果你需要 row，则需要显⽰的说明。
weex 中⼀切皆为 flexbox，⼀般来说，⽔平垂直居中，都可以直接使⽤ flexbox 去实现，⽽不是使⽤ position:absolute，因为不⽀持百分⽐的单位。
关于 flex 的使⽤，可以参照阮⼀峰的⽂章：
Flex 布局教程：语法篇
5、定位
weex 默认定位是 relative，不⽀持 static 的定位，⽀持 relative、absolute、fixed 和 sticky。
同样的，由于不⽀持百分⽐的单位，因此 top、left、right、bottom 必须使⽤ px，默认都是 0
⼀般来说我们会通过 z-index + position 来进⾏层级的设置，但是 weex （⽬前）不⽀持 z-index 设置层级关系，默认的越靠后的元素层级越⾼。
Android 系统中，如果定出超出了边界， 则会直接隐藏，且（⽬前）不能设置 overflow:visible
6、transform
transform 属性⽬前⽐较特殊的⼀点是，translate、translateY、translateX 三个的值⽀持百分⽐。
在线⽰例：
上⾯⽰例的百分⽐在 native 环境同样能够起作⽤
⽬前 transform ⽀持的格式：
translate( <number/percentage> [, <number/percentage>]?)
translateX( <number/percentage> )
translateY( <number/percentage> )
scale( )
scaleX( )
scaleY( )
rotate( <angle/degree> )
rotateX( <angle/degree> ) v0.14+
rotateY( <angle/degree> ) v0.14+
perspective( ) Android 4.1及以上版本⽀持 v0.16+
transform-origin: number/percentage/keyword(top/left/right/bottom)
7、transition
过渡动画建议使⽤ ansition(el,{},callback) 以 js 函数的⽅式进⾏，更加的可控，能够达到需求
transition 不⽀持简写形式，必须分开说明。
transition-property：允许过渡动画的属性名，不能使⽤ all
⽀持的属性：
width
height
top
bottom
left
right
backgroundColor
opacity
transform
transition-duration：过渡动画的时间，默认值是0，单位是 毫秒
transition-delay：过渡动画的延迟时间，单位是毫秒或者秒，如 2s
tramsition-timing-function：过渡动画的速度曲线，默认是 ease
⽬前⽀持的属性：
ease：逐渐变慢
ease-in：慢速开始，然后变快
ease-out：快速开始，然后变慢
linear：匀速变化
ease-in-out：慢速开始，然后变快，然后慢速结束
cubic-bezier(x1,y1,x2,y2)：三阶拜赛尔曲线，参数在 0-1 之间
8、伪类
伪类只⽀持四种：active、focus、disabled、enabled
⼀般在 input/textarea 使⽤ focus、disabled、enabled ⽐较多，因为只有这两种组件⽀持，⽽所有的组件是⽀持 active 伪类的。
9、线性渐变
rotate属性
weex ⽀持通过 background-color 进⾏线性渐变，但是只⽀持横向渐变，现在不⽀持径向渐变。
使⽤⽰例：
background-image: linear-gradient(to top,#a80077,#66ff00);
weex 现在也只⽀持了两种颜⾊渐变，不⽀持更多的颜⾊渐变：
to right：从左向右渐变
-to left：从右向左渐变
to bottom：从上到下渐变
to top：从下到上渐变
to bottom right：从左上⾓到右下⾓
to top left：从右下⾓到左上⾓
同时 background-image 的优先级⽐ background-color 要⾼，如果同时存在，前者将覆盖后者。weex 不建议使⽤ background 的简写形式，background: #cccccc；这种在 native 上是不起作⽤的。
10、box-shadow
box-shadow 只⽀持 IOS，不推荐使⽤
11、opacity
opacity 默认⽀持，使⽤⽅式和原来使⽤⽅式⼀样，取值 0-1
12、background-color
⽀持的颜⾊包括：
RGB
RGBA
⼗六进制（#ffffff）
精简⼗六进制（#FFF）（个⼈不是很推荐）
英⽂单词（个⼈不推荐）
三、其他注意事项
如果发现在 web 上样式能⽤，到了 native 上样式不能⽤，考虑过程可以如下：
是否⽀持该样式
书写形式是否正确，如不能简写
是否拉掉了标点符号（⽐如 transform(30% 30%) 拉掉了中间的 , 逗号）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。