1.盒型

  • width
  • height
  • padding
    • padding-left
    • padding-right
    • padding-top
    • padding-bottom
  • margin
    • margin-left
    • margin-right
    • margin-top
    • margin-bottom
  • border
    • border-style
    • border-width
      • border-left-width
      • border-top-width
      • border-right-width
      • border-bottom-width
    • border-color
      • border-left-color
      • border-top-color
      • border-right-color
      • border-bottom-color
    • border-radius
      • border-bottom-left-radius
      • border-bottom-right-radius
      • border-top-left-radius
      • border-top-right-radius
  <template>
<div style="width: 300; height: 100;">
<image src="http://img1.imgtn.bdimg.com/it/u=3942470672,3111472143&fm=21&gp=0.jpg" style="flex: 1;"></image>
</div>
</template>

2.弹性盒型

基于CSS flexbox Weex框风格模型,确保元素的行为可以预见和页面布局可以适应不同屏幕大小和不同的显示设备。Flexbox包含flex容器和flex节点。如果weex元素可以包含其他元素,这是一个flex容器。

旧版本和新的flexbox规范有差异,比如是否支持包装,旧版本是低于4.4版本的android版本。

2.1弹性容器

  • flex-directionrow | column

容器内布局垂直方向,默认值是自上而下 (top-to-bottom).

  • justify-contentflex-start | flex-end | center | space-between

容器内布局横向方向对其方向

  • align-itemsstretch | flex-start | center | flex-end

  <template>
<div style="width: 300; height: 100;">
<image src="http://img1.imgtn.bdimg.com/it/u=3942470672,3111472143&fm=21&gp=0.jpg" style="flex: 1;"></image>
<image src="http://pic2.ooopic.com/12/90/09/28bOOOPICd4_1024.jpg" style="flex: 1;"></image>
<image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="flex: 1;"></image>
</div>
</template>
  <template>
<div style="width: 100;">
<image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="width: 100; height: 100;"></image>
<div style="flex-direction: row;">
<text style="flex: 2; font-size: 32;">title</text>
<text style="flex: 1; font-size: 16;">$100</text>
</div>
</div>
</template>
<template>
<div style="flex-direction: row; justify-content: space-between;">
<text>WEEX</text>
<text>2016-05-08</text>
</div>
</template>

3.位置

  • positionrelative | absolute | fixed | sticky, default value is relative.

固定属性(fixed)保持位置固定当页面滚动的元素。粘性属性(sticky)保持元素定位为“卡”顶部或“相对”在原来的地方取决于它对滚动视图。

  • top: <number>, 向上偏移量,默认值为 0
  • bottom: <number>, 向下偏移量, 默认值为 0
  • left: <number>, 向左偏移量,默认值为 0
  • right: <number>, 向右偏移量,默认值为 0
<template>
<div style="flex-direction: column;">
<div style="height: 3000;">
<image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="top: 50; left: 50;width: 100; height: 100;"></image>
</div>
<div style="height: 3000;">
<image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="position: sticky;width: 100; height: 100;"></image>
</div>
<div style="height: 3000;">
<image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="position: absolute; top: 800; left: 50;width: 100; height: 100;"></image>
</div>
<div style="height: 3000;">
<image src="http://pic.58pic.com/58pic/13/06/19/81q58PICFkr_1024.jpg" style="position: fixed; top: 50; left: 500;width: 100; height: 100;"></image>
</div>
</div>
</template>

4.文本样式

  • color: <colors> 前景色.
  • font-size: <length> 字体大小.
  • font-style: <enum> normal | italic. 字体类型(正常、斜体). 默认值是正常字体.
  • font-weight: <enum> normal | bold. 字体类型(正常、加粗).默认值是正常字体
  • text-decoration: <enum> none | underline | line-through. 字体是否带下划线. 默认不带.
  • text-align: <enum> left | center | right. 对齐在父容器的位置. 默认左对齐.
  • font-family:<string> 字体类型(宋体、微软雅黑。。。),如果没有找到设定的字体,会回退到默认字体,不同的系统可能会不一样
  • text-overflow:<string> clip | ellipsis. 当内容溢出的时候是否以省略符号结束.
.my-class { color: red; }
.my-class { color: #f00; }
.my-class { color: #ff0000; }
.my-class { color: rgb(255, 0, 0); }
.my-class { color: rgba(255, 0, 0, 0.5); }

Weex 样式的更多相关文章

  1. weex 通用样式以及需要注意的问题

    一.说明 weex 对于 css 样式的支持是非常有限的,并且使用样式的时候,必须遵循 weex 定义的规则. 对于不遵循 weex 样式规则的代码,往往在 web 页面上有效,而在 native 环 ...

  2. (26)打鸡儿教你Vue.js

    weex框架的使用 1.weex开发入门 2.weex开发环境搭建 3.掌握部分weex组件模块 4.了解一些vue基本常见语法 5.制作一个接近原生应用体验的app weex介绍 安装开发环境 We ...

  3. weex 数据绑定,动态控制组件的显示内容及样式

    无论的原生开发还是weex开发,经常会需要我们对一些组件/控件动态赋值,在原生中,我们大家都知道,对控件setText就可以了,那么在weex中呢,我们需要怎么做呢,其实很简单,几行代码就可以搞定!首 ...

  4. 第八章 交互技术,8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障(作者:鬼道)

    8.4 Weex 双11会场大规模应用的秒开实战和稳定性保障 前言 Native 开发的诸多亮点中,流畅体验和系统调用是最多被提及的.流畅体验体现在页面滚动/动画的流畅性,背后是更好的内存管理和更接近 ...

  5. weex image

    weex 的image用来渲染图片, 可以使用img作为它的别名. 需要注意的是,他的长度可宽度必须指定, 不然它是不会工作的. 它没有任何的子组件. 有两个属性: src 用来指定图片的地址图片. ...

  6. weex scroller

    今天学习了一下weex的 scroller.就简单地对其整理一下自己的学习笔记. <scroller>这个标签只能出现在列(column)上面, 只有当它自己的内容大于类似与PC父级的高度 ...

  7. Weex中文文档

    这里整理当前已译出的Weex中文文档,如需查阅完整Weex文档,请访问http://alibaba.github.io/weex/doc/ . 同时也欢迎大家参与Weex中文文档翻译 [Guide] ...

  8. Weex详解:灵活的移动端高性能动态化方案

    原文地址:http://www.infoq.com/cn/articles/introducing-weex 在2016年4月份的QCon上,阿里巴巴资深总监,淘宝移动平台及新业务事业部.阿里百川负责 ...

  9. Weex 初始

    1.一旦数据和模板绑定,数据的变化会立即体现在前台的变化 <template> <container> <text style="font-size: {{si ...

随机推荐

  1. vim自动补全

    Vim 中使用 OmniComplete 为 C/C++ 自动补全 OmniComplete 并不是插件的名字,而是 Vim 众多补全方式中的一种(全能补全).说白了 OmniComplete 其实就 ...

  2. http server v0.1_mime.c

    #include <string.h> #include "mime.h" static STR_MIME_MAP mime_map[]= { MIME_MAP(MIM ...

  3. [BZOJ 3144] [Hnoi2013] 切糕 【最小割】

    题目链接:BZOJ - 3144 题目分析 题意:在 P * Q 的方格上填数字,可以填 [1, R] . 在 (x, y) 上填 z 会有 V[x][y][z] 的代价.限制:相邻两个格子填的数字的 ...

  4. 一个短路求值引起的一个小bug

    今天在写一个判断字符串是否回文时因为短路求值问题导致了一个bug,记录如下: 代码如下 bool isPal(char str[],int len) { int begin=0; int end=le ...

  5. python处理LINUX的PWD文档

    用冒号分隔的哟. 此章后面讲的JSON,配置文件读取,原理应该一样吧,只是要用合适的包去处理吧. CSV文档是用CSV包处理的. 文档: root:x:0:0:root:/root:/bin/bash ...

  6. Spring整合CXF,发布RSETful 风格WebService

    原文地址:http://www.cnblogs.com/hoojo/archive/2012/07/23/2605219.html 这篇文章是承接之前CXF整合Spring的这个项目示例的延伸,所以有 ...

  7. Linux os

    进程就是处于执行期的程序(目标代码存放在某种存储介质上,如内存).进程不只局限于可执行代码,还包括其他资源:打开的文件,挂起的信号,内核数据结构,内存地址空间以及至少一个执行线程. 进程是出于执行期的 ...

  8. 关于View和VIewController的关系和理解

    之前看过关老师的视频之后就有写关于视图切换的程序,不过那是很久之前了,那时候也不知道什么是View,什么是VIewController,就知道照着写.这次项目的时候,我又碰到了这个问题,我自以为比较能 ...

  9. [转载]jQuery UI 使用

    最近项目中使用了一些插件来做页面,这里把jQuery UI的使用分享出来,希望 对新手有帮助.文章结尾附源码下载. 1     jQuery UI 2     为我所用 2.1     Tabs 2. ...

  10. Anjuta 调试无输出 warning: GDB: Failed to set controlling terminal

    调试无输出,起初以为是那个warning的问题,后来才知道这个系统printf直到遇到'\n'换行符才输出,VC6用习惯了没想到还有这样的,网上说这样是节省系统资源. 那个warning暂时还没看到影 ...