wepy公共樣式_Weex——公共樣式

所有 weex 标簽都有以下基本樣式規則。

5829bc3646790.png

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

注意：目前在 和 元件上尚無法隻定義一個或幾個角的 border-radius。比如你無法在這兩個元件上使用 border-top-left-radius。

weex 盒模型的 box-sizing 預設為 border-box，即盒子的寬高包含内容、内邊距和邊框的寬度，不包含外邊距的寬度。

示例：

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 是中間對齊，所有成員項都垂直地居中顯示。

5829bc406b7f9.jpg

Flex 成員項

flex:

flex 屬性定義了 flex 成員項在容器中占據的尺寸。如果所有成員項都設定為 flex: 1，那麼它們就有相等的寬度(水準排列)或者相等的高度(垂直排列)。如果一共有兩個成員項，其中一個 flex: 1，另一個 flex: 2，那麼第一個将占據 1/3 的空間，另一個占據 2/3。如果所有 flex 成員項都不設定 flex 屬性，它們将根據容器的 justify-content 屬性來決定如何排列。

示例

一組平分了容器的圖檔。

一張固定寬度的圖檔加上一段流動布局的文本。

...

複雜的混合布局。

title

$100

一段文本左對齊，其他内容右對齊。

WEEX

2016-05-08

定位

我們可以使用以下屬性來定位一個 weex 元素。

position: relative | absolute | fixed | sticky

relative 是預設值，指的是相對定位；absolute 是絕對定位，以元素的容器作為參考系；fixed 保證元素在頁面視窗中的對應位置顯示；sticky 指的是僅當元素滾動到頁面之外時，元素會固定在頁面視窗的頂部。

top:

距離上方的偏移量，預設為 0。

bottom:

距離下方的偏移量，預設為 0。

left:

距離左方的偏移量，預設為 0。

right:

距離右方的偏移量，預設為 0。

示例

其他基本樣式

opacity:

取值範圍為 [0, 1]。預設值是 1，即完全不透明；0 是完全透明；0.5 是 50% 的透明度。

background-color:

設定元素的背景色，預設值是 transparent。

樣式屬性取值可用的類型

長度：數字後跟着 px 作為機關，px 也可以省略。

顔色：有多種取值類型。RGB(rgb(255, 0, 0))；RGBA(rgba(255, 0, 0, 0.5))；十六進制(#ff0000)；精簡寫法的十六進制(#f00)；色值關鍵字(red)。

枚舉值：特定可選的幾個字元串。

上手樣式

你可以按照以下步驟來規劃 weex 頁面的樣式。

1.全局樣式規劃：将整個頁面分割成合适的子產品。

2.flex 布局：排列和對齊頁面子產品。

3.定位盒子：定位并設定偏移量。

4.細節樣式處理：增加特定的具體樣式。