Weex学习样式总结

盒子模型

weex盒子模型

注意：

margin和padding的默认值是0.

border:

border-style边框样式，可选值

• solid 实线
• dashed 虚线
• dotted 点状边框

border-color边框颜色，默认#000000

border-width默认0

border-radius默认0

Flexbox

flex容器

默认且唯一的布局模型（在Weex中）。

1.flex-direction : 容器中flex诸多成员项的排列方向。

• culomn 从上到下，默认
• row 从左到右

2.justify-content : 容器中flex诸多成员项在主轴方向上如何处理空白部分。

• flex-start 默认值，成员项在前，空白在后
• flex-end 与flex-start相反
• center 成员项居中，两边留白
• space-between 容器两端的成员项对齐边界，留白均匀分布
• space-around 留白均匀分布

[图片上传失败...(image-d451e1-1537409613546)]

3.align-items:容器中flex诸多成员项在非主轴方向上如何处理空白。

• stretch 默认值，拉伸至容器大小
• center
• flex-start
• flex-end

align-items布局方式

4.flex成员项 ：flex：{number}，flex属性定义了成员项可占用剩余空间的大小。

如果所有的成员项设置相同的值 flex: 1，它们将平均分配剩余空间. 如果一个成员项设置的值为 flex: 2，其它的成员项设置的值为 flex: 1，那么这个成员项所占用的剩余空间是其它成员项的2倍。

定位

Position，用法与CSS的postion类似。

• relative 相对定位，默认值
• absolute 绝对定位于父视图
• fixed 保证元素在页面窗口中的对应位置显示
• sticky 指的是仅当元素滚动到页面之外时，元素会固定在页面窗口的顶部

top {number} 距离上方的偏移量，默认0
bottom
left
right

transform

其向元素提供2D转换功能。可进行旋转、缩放、移动、倾斜

• translate( [, ]?)
• translateX( )
• translateY( )
• scale( )
• scaleX( )
• scaleY( )
• rotate( )
• rotateX( )
• rotateY( )
• perspective( )
• transform-origin: number/percentage/keyword(top/left/right/bottom)

transition 动画

transition-property: 默认值为空，设置不同样式效果

参数名	描述：transition过渡执行动画的时候，____是否参与
width	组件的宽度
height	高度
top	组件的顶部距离
bottom	组件的底部距离
left	组件的左侧距离
right	组件的右侧距离
backgroundColor	组件的背景色
opacity	组件的不透明度
transform	组件的变换类型

transition-duration : 过渡的持续时间（ms），默认0

transition-delay : 请求到执行过渡的延迟时间，默认0

transition-timing-function : 描述transition过渡执行的速度曲线，是其过渡更为平滑。默认 ease

属性名	描述:transition过渡_____的过渡效果
ease	逐渐变慢
ease-in	慢速开始，逐渐变快
ease-out	快速开始，逐渐变慢
ease-in-out	慢速开始，变快，变慢结束
linear	匀速
cubic-bezier(x1, y1, x2, y2)	三阶贝塞尔曲线自定义transition过程。相关：cubic-bezier和Bézier curve.

伪类

weex支持4种：

• active
• focus
• disabled
• enabled

同时生效时，优先级高覆盖优先级低
互联规则:

互联规则

线性渐变

可通过background-image属性创建线性渐变。
目前只支持两种颜色：

方向	解释
to right	从左到右
to left	从右到左
to top	从下到上
to top left	从右下到左上
to bottom	从上到下
to bottom right	从左上到右下

阴影（box-shadow）

active、focus、disable、enable外，

• inset
• offset-x
• offset-y
• blur-radius
• color

其他基本样式：

opacity {number}:值范围[0， 1]，不透明的程度
background-color 背景色

文本样式

• color
• lines
• font-size
• font-style normal|italic（斜体）
• font-weight
• text-decoration
• text-align
• font-family
• text-overflow