基本样式 #23

pushiming · 2016-06-22T07:34:24Z

本文档已迁移至 https://weex-project.io/cn/references/common-style.html ，此处不再维护，谢谢。

基本样式

所有 weex 标签都有以下基本样式规则。

盒模型

weex 盒模型基于 CSS 盒模型，每个 weex 元素都可视作一个盒子。我们一般在讨论设计或布局时，会提到「盒模型」这个概念。

元素实际的内容（content）、内边距（paddings）、边框（borders）、外边距（margins），形成一层层的盒子包裹起来，这就是盒模型大体上的含义。

width
height
padding (space around content, between element content and the element border)
- padding-left
- padding-right
- padding-top
- padding-bottom
margin (space around elements, outside the border)
- margin-left
- margin-right
- margin-top
- margin-bottom
border
- border-style (solid, dashed, dotted)
- 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 (rounded borders to elements, default value is 0 meaning right angle)
  - border-bottom-left-radius
  - border-bottom-right-radius
  - border-top-left-radius
  - border-top-right-radius

注意：目前在 <image> 和 <text> 组件上尚无法只定义一个或几个角的 border-radius。比如你无法在这两个组件上使用 border-top-left-radius。

weex 盒模型的 box-sizing 默认为 border-box，即盒子的宽高包含内容、内边距和边框的宽度，不包含外边距的宽度。

示例：

<template>
  <div>
    <image src="..." style="width: 400; height: 200; margin-left: 20;"></image>
  </div>
</template>

Flexbox

weex 布局模型基于 CSS 的 Flexbox。以便所有页面元素的排版能够一致可预测，同时页面布局能适应各种设备或者屏幕尺寸。

Flexbox 包含 flex 容器和 flex 成员项。如果一个 weex 元素可以容纳其他元素，那么它就成为 flex 容器。需要注意的是，flexbox 的老版规范相较新版有些出入，比如是否能支持 wrapping。这些都描述在 W3C 的工作草案中了，你需要注意下新老版本之间的不同。另外，老版本只在安卓 4.4 版以下得到支持。

Flex 容器

在 weex 中，Flexbox 是默认且唯一的样式模型，所以你不需要手动为元素添加 display: flex; 属性。

flex-direction: row | column
flex-direction 属性定义了 flex 容器中 flex 成员项的排列方向。默认值为 column，即从左到右、从上到下。
justify-content: flex-start | flex-end | center | space-between
justify-content 属性定义了 flex 容器中 flex 成员项在水平方向上如何排列以处理空白部分。flex-start 是默认值，即左对齐，所有的 flex 成员项都排列在容器的前部；flex-end 则意味着右对齐，成员项排列在容器的后部；center 即中间对齐，成员项排列在容器中间、两边留白；space-between 表示两端对齐，空白均匀地填充到 flex 成员项之间。
align-items: stretch | flex-start | center | flex-end
align-items 属性定义了 flex 容器中 flex 成员项在垂直方向上如何排列以处理空白部分。stretch 是默认值，即拉伸高度至 flex 容器的大小；flex-start 则是上对齐，所有的成员项排列在容器顶部；flex-end 是下对齐，所有的成员项排列在容器底部；center 是中间对齐，所有成员项都垂直地居中显示。

Flex 成员项

flex: <number>
flex 属性定义了 flex 成员项在容器中占据的尺寸。如果所有成员项都设置为 flex: 1，那么它们就有相等的宽度（水平排列）或者相等的高度（垂直排列）。如果一共有两个成员项，其中一个 flex: 1，另一个 flex: 2，那么第一个将占据 1/3 的空间，另一个占据 2/3。如果所有 flex 成员项都不设置 flex 属性，它们将根据容器的 justify-content 属性来决定如何排列。

示例

一组平分了容器的图片。

<template>
  <div style="width: 300; height: 100;">
    <image src="..." style="flex: 1;"></image>
    <image src="..." style="flex: 1;"></image>
    <image src="..." style="flex: 1;"></image>
  </div>
</template>

一张固定宽度的图片加上一段流动布局的文本。

<template>
  <div style="width: 300; height: 100;">
    <image src="..." style="width: 100; height: 100;"></image>
    <text style="flex: 1;">...</text>
  </div>
</template>

复杂的混合布局。

<template>
  <div style="width: 100;">
    <image src="..." 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>

定位

我们可以使用以下属性来定位一个 weex 元素。

position: relative | absolute | fixed | sticky
relative 是默认值，指的是相对定位；absolute 是绝对定位，以元素的容器作为参考系；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="..." style="top: 50; left: 50; ..."></image>
    </div>
    <div style="height: 3000;">
      <image src="..." style="position: sticky; ..."></image>
    </div>
    <div style="height: 3000;">
      <image src="..." style="position: absolute; top: 50; left: 50; ..."></image>
    </div>
  </div>
</template>

其他基本样式

opacity: <number>
取值范围为 [0, 1]。默认值是 1，即完全不透明；0 是完全透明；0.5 是 50% 的透明度。
background-color: <colors>
设定元素的背景色，默认值是 transparent。

样式属性取值可用的类型

长度：数字后跟着 px 作为单位，px 也可以省略。
颜色：有多种取值类型。RGB（rgb(255, 0, 0)）；RGBA（rgba(255, 0, 0, 0.5)）；十六进制（#ff0000）；精简写法的十六进制（#f00）；色值关键字（red）。
枚举值：特定可选的几个字符串。

注意： 色值的关键字列表。

上手样式

你可以按照以下步骤来规划 weex 页面的样式。

全局样式规划：将整个页面分割成合适的模块。
flex 布局：排列和对齐页面模块。
定位盒子：定位并设置偏移量。
细节样式处理：增加特定的具体样式。

The text was updated successfully, but these errors were encountered:

luics · 2016-06-22T07:37:59Z

赞，感谢。

zjnxyz · 2016-07-04T06:18:41Z

赞，期待。。。

ourfeel · 2016-07-21T02:32:35Z

没有zindex?

jiwenfei · 2016-08-07T13:07:39Z

关于定位position，在0.4.4不能用？

jerrybendy · 2016-08-23T06:59:10Z

你好， Flex 容器一节翻译有误， flex 的方向默认值是 column，而非 row 。

英文原文：

Flexbox is the default and only style model in Weex, so you don't have to add display: flex; in a container.
flex-direction: values row | column, default value column

Jinjiang · 2016-08-23T17:27:24Z

@jerrybendy 多谢反馈，已更新：）

coderyi · 2016-09-13T04:42:54Z

样式属性取值可用的类型的名字没必要翻译为中文吧！比如length number color

blacksunset · 2016-10-28T08:21:58Z

怎么把样式独立出一个文件，比如：整个项目有一个通用的样式，只需要用到的引入这个样式，在class上加上就好

nebulateks · 2016-11-01T05:34:41Z

position: sticky;属性不能使背景色固定吗？
0.5.10版本：
<scroller>
<div style="position:sticky; height:80; background-color: #f60;"> <img..../> </div>
<div style="height:3000;"/>
</scroller>
在chrome和实机ip6 safari上均是只有图片被固定；在playground上图片和背景色均能正常固定

cokeknight · 2016-11-02T03:34:28Z

弹出框该怎么做？

malaimoo · 2016-11-07T07:01:43Z

我只想说，支持的样式太少了。这几个只能解决最基本的布局。

lezi2012 · 2016-11-12T16:37:43Z

各位好：我遇到这样一个问题：
我将scroller设置如下style：
width: 750px;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;

然后将scroller里面的div（多个）都设置为width=300,
问题是：
子div并没有先从左到右排列，然后在从上到下排列，而是一个个直接向下排列在左面，scroller右面空了一半，请问如何做呢？
我想做一个瀑布流式的scroller。

我把代码贴出来

<template>
    <div>
        <dbg_head_bar></dbg_head_bar>
        <scroller class="content_list_container">
            <div class="content_list_item" repeat="{{contents}}">
                <image class="content_image" src="http://192.168.1.101/test/{{index}}.png"></image>
                <text class="content_title">
                    这里是标题，这里是标题，这里是标题，这里是标题，这里是标题，这里是标题，这里是标题，这里是标题，这里是标题，
                </text>
                <text class="content_category">
                    品类1-品类2
                </text>
            </div>
        </scroller>
    </div>


</template>

<style>
    .content_list_container {
        background-color: lightgray;
        width: 750px;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }

    .content_list_item {
        background-color: white;
        border-radius: 10px;
        width: 300px;
        margin: 10px;
    }

    .content_image {
        border-radius: 10px;
        width: 280px;
        height: 300px;
        margin: 10px;
    }

    .content_title {
        margin-top: 20px;
        margin-bottom: 20px;
        font-size: 20px;
    }

    .content_category {
        color: gray;
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 12px;
    }
</style>

<script>
    require('weex-components');
    require('./widget/dbg_head_bar.we');
    var common = require('./common/common.js');
    module.exports = {
        data: {
            contents: [
                {index: 0},
                {index: 1},
                {index: 2},
                {index: 3},
                {index: 4},
                {index: 5},
                {index: 6}
            ]
        },
        methods: {
            item_click: function (e) {
                common.toast(JSON.stringify(e));
            }
        }
    }
</script>

jerrybendy · 2016-11-14T01:19:12Z

@lezi2012 如果我没记错的话， column 是列的意思。。。

yundongbot · 2016-12-09T03:09:02Z

@blacksunset 目前暂不支持

yundongbot · 2016-12-09T03:10:04Z

@ourfeel 目前不支持 z-index。不过，可以根据组件顺序确定谁在更上层

yundongbot · 2016-12-09T03:10:20Z

@cokeknight
Weex 提供原生的 modal 模块。可参考文档： http://alibaba.github.io/weex/cn/doc/modules/modal.html

你也可以自己实现一个 http://alibaba.github.io/weex/cn/doc/demo/modal.html

yundongbot · 2017-01-20T06:49:30Z

本文档已迁移至 https://weex-project.io/cn/references/common-style.html ，此处不再维护，谢谢。

SevenHDU · 2017-11-29T08:49:49Z

想实现一个旋转木马的轮播效果图（图片之间要重叠的），但是通用属性不支持z-index。有没有其他的方式可以替代？

This was referenced Sep 18, 2016

文档翻译--cell #75

Open

文档翻译--list #74

Open

文档翻译--web #76

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

基本样式 #23

基本样式 #23

pushiming commented Jun 22, 2016 •

edited by yundongbot

Loading

luics commented Jun 22, 2016

zjnxyz commented Jul 4, 2016

ourfeel commented Jul 21, 2016

jiwenfei commented Aug 7, 2016

jerrybendy commented Aug 23, 2016

Jinjiang commented Aug 23, 2016

coderyi commented Sep 13, 2016

blacksunset commented Oct 28, 2016

nebulateks commented Nov 1, 2016 •

edited

Loading

cokeknight commented Nov 2, 2016

malaimoo commented Nov 7, 2016

lezi2012 commented Nov 12, 2016 •

edited

Loading

jerrybendy commented Nov 14, 2016

yundongbot commented Dec 9, 2016

yundongbot commented Dec 9, 2016

yundongbot commented Dec 9, 2016

yundongbot commented Jan 20, 2017

SevenHDU commented Nov 29, 2017

基本样式 #23

基本样式 #23

Comments

pushiming commented Jun 22, 2016 • edited by yundongbot Loading

基本样式

盒模型

Flexbox

Flex 容器

Flex 成员项

示例

定位

示例

其他基本样式

样式属性取值可用的类型

上手样式

luics commented Jun 22, 2016

zjnxyz commented Jul 4, 2016

ourfeel commented Jul 21, 2016

jiwenfei commented Aug 7, 2016

jerrybendy commented Aug 23, 2016

Jinjiang commented Aug 23, 2016

coderyi commented Sep 13, 2016

blacksunset commented Oct 28, 2016

nebulateks commented Nov 1, 2016 • edited Loading

cokeknight commented Nov 2, 2016

malaimoo commented Nov 7, 2016

lezi2012 commented Nov 12, 2016 • edited Loading

jerrybendy commented Nov 14, 2016

yundongbot commented Dec 9, 2016

yundongbot commented Dec 9, 2016

yundongbot commented Dec 9, 2016

yundongbot commented Jan 20, 2017

SevenHDU commented Nov 29, 2017

pushiming commented Jun 22, 2016 •

edited by yundongbot

Loading

nebulateks commented Nov 1, 2016 •

edited

Loading

lezi2012 commented Nov 12, 2016 •

edited

Loading