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. Contest20140710 loop bellman-ford求负环&&0/1分数规划

    loop|loop.in|loop.out 题目描述: 给出一个有向带权图,权为边权,求一个简单回路,使其平均边权最小. 简单回路指不多次经过同一个点的回路. 输入格式: 第一行两个整数,表示图的点数 ...

  2. 【HDOJ】3205 Factorization

    题意很简单.就是求x^k-1的因式分解.显然x-1必然是其中之一(x=1, x^k-1=0).假设k=mp. 则x^k = (x^p)^m, 同理x^p-1必然是其中之一,即x^p的所有因式一定是x^ ...

  3. unity3d 制造自己的水体water effect(一)

    first,I wish you a happy new year, and study in spring festival’s eve means you are hardworking,haha ...

  4. lightoj1051 Good and Bad (dp)

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1051 题目大意:给你一个字符串,只包含大写字母和‘?’,如果字符串中出现了连续三个以上 ...

  5. hdu 4620 搜索

    好苦逼,为啥数组开小了,不会runtime error,还得我WA了几个小时,我泪流满面. 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4620 #i ...

  6. poj 1679 The Unique MST【次小生成树】

    The Unique MST Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 24034   Accepted: 8535 D ...

  7. InfoSphere BigInsights 安装部署

    InfoSphere BigInsights 有三个版本:基础版.企业体验版.企业版.基础版是免费的,但是少了一些功能:企业体验版是在购买企业版之前又来体验测试的:如果要部署企业版,应该购买企业版.安 ...

  8. EassyUI内置方法与属性

    Jquery插件 easyUI属性汇总 作者: 字体:[增加 减小] 类型:转载 时间:2011-01-19我要评论 找了个时间看了下EasyUI插件,对它的插件感觉是很舒服,特地把Easy UI的大 ...

  9. 深入理解C#:编程技巧总结(一)

    原创文章,转载请注明出处! 以下总结参阅了:MSDN文档.<C#高级编程>.<C#本质论>.前辈们的博客等资料,如有不正确的地方,请帮忙及时指出!以免误导! 1.实现多态性的两 ...

  10. thinkphp框架dump友好调试输出函数

    /** * 浏览器友好的变量输出 * @param mixed $var 变量 * @param boolean $echo 是否输出 默认为True 如果为false 则返回输出字符串 * @par ...