樣式表和 CSS 規則是由 Weex js 框架和原生渲染引擎管理的。出現性能考慮，Weex 目前只支持單個類選擇器，並且只支持 CSS 規則的子集。在Weex裏，每一個Vue組件的樣式都是scoped。
一、盒模型
Weex 盒模型基於 CSS 盒模型，每個 Weex 元素都可視作一個盒子。
盒模型描述了一個元素所佔用的空間。每一個盒子有四條邊界：外邊距邊界 margin edge, 邊框邊界 border edge, 內邊距邊界 padding edge 與內容邊界 content edge。
- Weex 盒模型的 box-sizing 默認爲 border-box，即盒子的寬高包含內容、內邊距和邊框的寬度，不包含外邊距的寬度。
- 在 Android 平臺，Weex 只支持 overflow:hidden。
-
在 iOS 上，Weex 支持 overflow:hidden 和 overflow:visible，默認是 overflow:visible。
二、Flexbox
Weex 佈局模型基於 CSS Flexbox，以便所有頁面元素的排版能夠一致可預測，同時頁面佈局能適應各種設備或者屏幕尺寸。Flexbox 包含 flex 容器和 flex 成員項。文檔中未說明的 flexbox 屬性均不支持：如 order、flex-flow 等。
在 Weex 中，Flexbox 是默認且唯一的佈局模型，所以你不需要手動爲元素添加 display: flex; 屬性。
1、direction
決定了文字方向和Flex容器的基線方向。默認值爲ltr（從左到右排布）；
2、flex-direction
flex-direction定義了 flex 容器中 flex 成員項的排列方向，默認值爲 column。
- column：從上到下排列。
- column-reverse: 從下到上排布
- row：如果存在direction:ltr，則從左到右排布；如果存在direction:rtl，則從右到左排布。
- row-reverse: 排布方向與flex-direction:row相反
3、flex-wrap
flex-wrap屬性決定了Flex成員項在一行還是多行分佈，默認值爲nowrap。
- nowrap: Flex成員項在一行排布，排布的開始位置由direction指定。
- wrap：Flex成員項在多行排布，排布的開始位置由direction指定
- wrap-reverse: 行爲類似於wrap，排布方向與其相反。
4、justify-content
定義了 flex 容器中 flex 成員項在主軸方向上如何排列以處理空白部分。可選值爲 flex-start | flex-end | center | space-between，默認值爲 flex-start。
- flex-start：是默認值，所有的 flex 成員項都排列在容器的前部；
- flex-end：則意味着成員項排列在容器的後部；
- center：即中間對齊，成員項排列在容器中間、兩邊留白；
- space-between：表示兩端對齊，空白均勻地填充到 flex 成員項之間。
5、align-items
定義了 flex 容器中 flex 成員項在縱軸方向上如何排列以處理空白部分。可選值爲 stretch | flex-start | center | flex-end，默認值爲 stretch。
- stretch 是默認值，即拉伸高度至 flex 容器的大小；
- flex-start 則是上對齊，所有的成員項排列在容器頂部；
- flex-end 是下對齊，所有的成員項排列在容器底部；
- center 是中間對齊，所有成員項都垂直地居中顯示。
三、定位
Weex 支持 position 定位，用法與 CSS position 類似。爲元素設置 position 後，可通過 top、right、bottom、left 四個屬性設置元素座標。
position：
設置定位類型。可選值爲 relative | absolute | fixed | sticky，默認值爲 relative。
- 如果定位元素超過容器邊界，在 Android 下，超出部分將不可見，原因在於 Android 端元素 overflow 默認值爲 hidden，但目前 Android 暫不支持設置 overflow: visible。
四、書寫規範
項目開發css 書寫規範：
1、樣式簡寫
不支持簡寫法，所有類似margin: 0 0 10px 10px的都是不支持的，margin、padding必須明確分開定義；
.form-new {
width: 750px;
background-color: #ffffff;
padding-left: 15wx;
padding-right: 15wx;
padding-bottom: 10wx;
padding-top: 10wx;
font-size: 14wx;
color: #666;
}
2、樣式嵌套
Weex不支持且套寫法，即使使用了預處理器, css嵌套的寫法也是會導致樣式失效的；
3、默認尺寸
Weex默認使用750px * 1334px作爲適配尺寸；
4、z-index
Native中不支持z-index，越靠後寫的展示在最上層；
5、僞類
Weex 支持四種僞類：active, focus, disabled, enabled，不支持css中的after , before 僞類選擇器；
6、border
border 畫三角的差異性：在ios / andorid 上顯示的是方形；
7、class
class樣式類名不支持多個分割線寫法，比如select-center-list-item 會提示SyntaxError: No identifiers allowed directly after numeric literal；
8、引入樣式文件
Native環境下不存在全局樣式, 在js文件中import ‘index.css’無效，但支持單獨import樣式文件。
@charset "UTF-8";
@import url('../global/fn.less'); // 功能樣式
body{
background-color: #f5f7f6;
}
.container {
position: absolute;
width: 750px;
right: 0;
bottom: 0;
left: 0;
}
9、漸變
weex不支持徑向漸變radial-gradient,只支持創建線性漸變。並且只支持兩種顏色的漸變。漸變方向如下
- to right: 從左向右漸變
- to left: 從右向左漸變
- to bottom: 從上向下漸變
- to top: 從下向上漸變
- to bottom right: 從左上角向右下角漸變
- to top left: 從右下角向左上角漸變
background-image優先級高於background-color，這意味着同時設置background-image和background-color,後者會被覆蓋。
.submit-on {
color: #fff;
background-image: linear-gradient(to right, #ff6831, #ff974d);
}
10、單位
Weex 支持'wx' 和‘px’ 長度單位，且不可忽略；不支持'em'、'rem'、'%'、'pt'這類長度單位，在web端可以利用插件'postcss-plugin-px2rem' 將px轉換成rem , 插件'postcss-plugin-weex' 將'wx'轉化成‘px’。
11、樣式繼承
Native 中，子元素不能繼承父元素樣式，各原生樣式相對獨立（0.20版本以下）。0.20版本以上richtext 中的部分樣式可被繼承。
12、樣式需要聲明scoped 屬性，寬度設置不支持 %
參考資料