weex的css樣式相關

Shania發表於2018-04-25
CSS

阿里提供的UI庫

weex引入css的方式

  1. 行內樣式
  2. 內聯在vue檔案的style標籤中

    <style>  
    html{    
        background-color: #f00;  
    }
</style>
複製程式碼

  3. 利用style標籤的src屬性匯入

    <style src='./Home.css'></style>
複製程式碼

  4. import匯入

    <style scoped> 
    @import url('./Home.css');
</style>複製程式碼

weex中的css限制

有關css的一些樣式編輯限制請去官網檢視，這裡簡單描述下：
  1. border和background不支援組合寫法，必須分開編輯，<div>標籤和<text>標籤不支援background-image屬性

  2. 只支援畫素值，不支援相對值，適配以750畫素為標準

  3. weex支援position定位:relative | absolute |fixed |sticky ，預設值是relative

  4. weex不支援z-index設定元素層級關係，但是靠後的元素層級越高

  5. 如果定位元素超過容器邊界，在Android下，超出部分將不可見，原因在於在Android端元素overflow預設值為hidden，且overflow沒有其他值。

  6. 支援線性漸變：linea-gradient，不支援徑向漸變：radius-gradient

  7. weex中box-shadow僅僅支援ios

  8. ios中image元件無法定義一個或多個角的border-radius，只能直接使用border-radius定義圓角，Android可隨意定義

  9. weex中，flexbox是預設並且唯一的佈局模型，每個元素都預設擁有display:flex屬性

  10. Weex 盒模型的 box-sizing 預設為 border-box

  11. 標準css有多種選擇器，但weex中只支援單個class name 選擇器或者id選擇器，儘量選擇類選擇器

  12. 子元素的樣式不會繼承自父元素，比如color和font-size等樣式作用在<text>標籤的上層<div>是無效的。

  13. 文字必須放在<text>標籤中，不可以直接放在<div>標籤中

  14. <text>標籤，有個lines樣式，用於限制文字行數，並出現省略號，但是lines:1必須放在css裡面，不能放在作為屬性放在<text>標籤中，類似這樣<text lines:"2"></text>，這樣不生效。

  15. <input>標籤，必須帶結束符，網頁端瀏覽無法聚焦沒關係，因為模擬器不支援；必須編輯<input>標籤的高度，否則聚焦游標會不顯示。


相關文章