通用CSS

CSS樣式

目前平臺只支持本文檔中列出的CSS樣式，如無特殊說明，樣式屬性的取值范圍和規(guī)則與標(biāo)準(zhǔn)CSS一致。

所有組件默認(rèn)為flex布局，以下為平臺和瀏覽器默認(rèn)值不一樣的地方：

{
    display:flex;
    flex-direction:column;
    box-sizing:border-box;
    position:relative;
}

• CSS選擇器支持id、class、element。

• 偽類樣式支持active、disabled、focus、checked等。其中active為組件點(diǎn)擊高亮狀態(tài)樣式，disabled為組件禁用狀態(tài)，focus為輸入框組件獲取焦點(diǎn)狀態(tài)，checked為組件選中狀態(tài)。

• 不支持繼承。

• 不支持通配規(guī)則*{}，通配規(guī)則需要驚人的計(jì)算次數(shù)，嚴(yán)重影響效率。

• 應(yīng)盡量少的對標(biāo)簽進(jìn)行選擇，而應(yīng)該使用class。如：#nav li{}，應(yīng)優(yōu)化為給list-view標(biāo)簽加上nav_item的class，并定義.nav_item{}樣式進(jìn)行選擇。

• 不應(yīng)用標(biāo)簽限定ID或者類選擇符。如：ul#nav，應(yīng)該簡化為#nav。

• 不支持使用后代選擇器。后代選擇器將降低選擇器的權(quán)重值，計(jì)算開銷是最高的。應(yīng)盡量將選擇器的深度降到最低，使用class來關(guān)聯(lián)每一個標(biāo)簽元素。

通用樣式

CSS 背景屬性（Background）

background                   //設(shè)置元素的背景，目前只支持background-color或background-image，不支持其它屬性。
background-color             //設(shè)置元素的背景顏色。
background-image             //設(shè)置元素的背景圖像。
background-position          //設(shè)置背景圖像的起始位置。
background-repeat            //設(shè)置是否及如何重復(fù)背景圖像。
background-size              //設(shè)置背景圖片的尺寸。

CSS 邊框?qū)傩裕˙order）

邊框的樣式只支持solid、dashed、dotted，暫不支持每個邊單獨(dú)設(shè)置不同邊框樣式。

border                       //在一個聲明中設(shè)置所有的邊框?qū)傩浴?border-bottom                //在一個聲明中設(shè)置所有的下邊框?qū)傩浴?border-bottom-color          //設(shè)置下邊框的顏色。
border-bottom-style          //設(shè)置下邊框的樣式。
border-bottom-width          //設(shè)置下邊框的寬度。
border-color                 //設(shè)置四條邊框的顏色。
border-left                  //在一個聲明中設(shè)置所有的左邊框?qū)傩浴?border-left-color            //設(shè)置左邊框的顏色。
border-left-style            //設(shè)置左邊框的樣式。
border-left-width            //設(shè)置左邊框的寬度。
border-right                 //在一個聲明中設(shè)置所有的右邊框?qū)傩浴?border-right-color           //設(shè)置右邊框的顏色。
border-right-style           //設(shè)置右邊框的樣式。
border-right-width           //設(shè)置右邊框的寬度。
border-style                 //設(shè)置四條邊框的樣式。目前只支持一個值寫法。
border-top                   //在一個聲明中設(shè)置所有的上邊框?qū)傩浴?border-top-color             //設(shè)置上邊框的顏色。
border-top-style             //設(shè)置上邊框的樣式。
border-top-width             //設(shè)置上邊框的寬度。
border-width                 //設(shè)置四條邊框的寬度。
border-radius                //簡寫屬性，設(shè)置所有四個 border-*-radius 屬性。
border-top-left-radius       //定義邊框左上角的形狀。
border-top-right-radius      //定義邊框右下角的形狀。
border-bottom-left-radius    //定義邊框左下角的形狀。
border-bottom-right-radius   //定義邊框右下角的形狀。
box-shadow                   //向方框添加陰影。只支持添加一個，spread和inset暫不支持。

Color 屬性

opacity                      //設(shè)置元素的不透明度。

CSS 尺寸屬性（Dimension）

height                       //設(shè)置元素高度。
min-height                   //設(shè)置元素的最小高度。
max-height                   //設(shè)置元素的最大高度。
width                        //設(shè)置元素的寬度。
min-width                    //設(shè)置元素的最小寬度。
max-width                    //設(shè)置元素的最大寬度。

可伸縮框?qū)傩裕‵lexible Box）

flex-flow                    //flex-direction 和 flex-wrap 屬性的簡寫。
flex-direction               //指定了彈性子元素在父容器中的排列方向。默認(rèn)值column。
flex-wrap                    //指定彈性盒子的子元素?fù)Q行方式。
justify-content              //應(yīng)用在彈性容器上，把彈性項(xiàng)沿著彈性容器的主軸線（main axis）對齊。
align-items                  //設(shè)置或檢索彈性盒子元素在側(cè)軸（縱軸）方向上的對齊方式。
align-content                //在彈性容器內(nèi)的各項(xiàng)沒有占用交叉軸上所有可用的空間時，對齊容器內(nèi)的各項(xiàng)。
align-self                   //設(shè)置彈性元素自身在側(cè)軸（縱軸）方向上的對齊方式。
flex                         //用于指定彈性子元素如何分配空間。flex-grow、flex-shrink、flex-basis屬性的簡寫。
flex-grow                    //定義彈性盒子元素的擴(kuò)展比率。
flex-shrink                  //定義彈性盒子元素的收縮比率。當(dāng)元素為scroll-view的直接子節(jié)點(diǎn)時，默認(rèn)值為0。
flex-basis                   //定義彈性盒子元素的默認(rèn)基準(zhǔn)值。

CSS 外邊距屬性（Margin）

margin                       //在一個聲明中設(shè)置所有外邊距屬性。
margin-bottom                //設(shè)置元素的下外邊距。
margin-left                  //設(shè)置元素的左外邊距。
margin-right                 //設(shè)置元素的右外邊距。
margin-top                   //設(shè)置元素的上外邊距。

CSS 內(nèi)邊距屬性（Padding）

padding                      //在一個聲明中設(shè)置所有內(nèi)邊距屬性。
padding-bottom               //設(shè)置元素的下內(nèi)邊距。
padding-left                 //設(shè)置元素的左內(nèi)邊距。
padding-right                //設(shè)置元素的右內(nèi)邊距。
padding-top                  //設(shè)置元素的上內(nèi)邊距。

CSS 定位屬性（Positioning）

display                      //規(guī)定元素的顯示類型。只支持flex、none，默認(rèn)值flex。
position                     //規(guī)定元素的定位類型。只支持relative、absolute，默認(rèn)值relative。
bottom                       //設(shè)置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left                         //設(shè)置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
right                        //設(shè)置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
top                          //設(shè)置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
z-index                      //設(shè)置元素的堆疊順序。
visibility                   //設(shè)置元素是否顯示。

2D/3D 轉(zhuǎn)換屬性（Transform）

transform                    //向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。
transform-origin             //設(shè)置轉(zhuǎn)換元素的位置。

過渡屬性（Transition）

transition                   //簡寫屬性，用于在一個屬性中設(shè)置四個過渡屬性。
transition-property          //規(guī)定應(yīng)用過渡的 CSS 屬性的名稱。
transition-duration          //定義過渡效果花費(fèi)的時間。
transition-timing-function   //規(guī)定過渡效果的時間曲線。
transition-delay             //規(guī)定過渡效果何時開始。

文本樣式

CSS 字體屬性（Font）

font-family                  //規(guī)定文本的字體系列。
font-size                    //規(guī)定文本的字體尺寸。
font-style                   //規(guī)定文本的字體樣式。
font-weight                  //規(guī)定字體的粗細(xì)。
font-variant                 //規(guī)定是否以小型大寫字母的字體顯示文本。

CSS 文本屬性（Text）

color                        //設(shè)置文本的顏色。
text-align                   //規(guī)定文本的水平對齊方式。
line-height                  //設(shè)置行高。
text-shadow                  //規(guī)定添加到文本的陰影效果。
direction                    //設(shè)置文本方向。
letter-spacing               //設(shè)置字符間距。
text-indent                  //設(shè)置文本中首行文本的縮進(jìn)。
text-decoration              //規(guī)定添加到文本的裝飾效果。只支持underline和line-through。
text-overflow                //規(guī)定當(dāng)文本溢出包含元素時發(fā)生的事情。只支持clip和ellipsis。
white-space                  //設(shè)置元素內(nèi)的空白怎樣處理。支持normal和nowrap。
word-break                   //規(guī)定文本的換行規(guī)則。
unicode-bidi                 //設(shè)置或返回文本是否被重寫。