UI library provided by Ali

Weex introduces the CSS

  1. Inline style
  2. Inline in the style tag of the Vue file 

    <style>  
    html{    
        background-color: #f00;  
    }
</style>
Copy the code

  3. Import using the SRC attribute of the style tag 

    <style src='./Home.css'></style>
Copy the code

  4. The import import

    <style scoped> 
    @import url('./Home.css');
</style>Copy the code

Restrictions on the CSS in weeX

For some style editing restrictions on CSS, go to
websiteView, here is a brief description:

  1. borderandbackgroundCombined writing is not supported and must be edited separately.<div>The labels and<text>Tag not supportedbackground-imageattribute

  2. Only pixel values are supported, not relative values. 750 pixels are used as the standard

  3. Weex support position location: relative | absolute | fixed | sticky, the default value is relative

  4. Weex does not support the z-index hierarchy, but the lower element has a higher hierarchy

  5. If the positioned element exceeds the container boundary, the overflow portion is not visible under Android because on the Android side the element overflow defaults to hidden and overflow has no other value.

  6. Linear gradient: Linea-gradient is supported, radial gradient: radius-gradient is not supported

  7. Weex box-shadow supports only ios

  8. In ios, the image component cannot define one or more border-radius corners. Instead, you can use border-radius to define rounded corners

  9. In Weex, flexbox is the default and only layout model, and each element has the display: Flex attribute by default

  10. Box-sizing of Weex box models is border-box by default

  11. The STANDARD CSS supports multiple selectors. However, weeX supports only a single class name or ID selector

  12. The styles of child elements do not inherit from the parent, and styles such as color and font size do not apply to the

    above the

    tag.

  13. Text must be placed inside the

    tag, not directly inside the

    tag

  14. The

    tag has a lines style that limits the number of lines of text and ellipses, but lines:1 must be placed in CSS, not in a

    tag as an attribute, like
    . This will not work.

  15. The tag must have an end character. It doesn’t matter if you can’t focus when browsing on the web because the emulator doesn’t support it. You must edit the height of the tag or the focus cursor will not be displayed.