• 技术文章 >web前端 >前端问答

    wxss和css3的区别是什么

    青灯夜游青灯夜游2020-12-21 15:05:35原创831

    区别:1、 wxss不能直接通过css3中的background-image属性来设置显示的背景图片;2、小程序中的文档流中不存在window、document对象,在使用css3属性position时需注意为基础节点设置fixed属性值。

    wxss和css3的区别

    0 . wxss不能直接通过css3中的background-image属性来设置显示的背景图片。

    例如我在wxss中书写如下

    background-image: url(imageB.png);

    控制台打印:

    pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取,可以使用网络图片,或者 base64,或者使用<image/>标签。
    1 .小程序中的文档流中不存在window、document对象,即不能使用jquery与zepto等js库区操作dom。这也从另一方面致使css3属性:position 在使用时需要一些注意事项。
    使用时应注意,为基础节点container设置fixed属性,否则position=absolute不会生效
    /**app.wxss**/
    
    .container {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 200rpx 0;
      box-sizing: border-box;
      position: fixed;
    }
    2. 小程序中wxml中设置wxss变量时,应返回string类型值(注意 " " 和 ' ' 之间的嵌套关系’’)。如下:
    <view id='imageBtn' style='display:{{imageBtn_display?"inherit":"none"}}' catchtouchmove='touchRotateAction'></view>

    3.其他

    支持动画 @keyframes,貌似不能加厂商前缀。

    支持过渡 transition。

    更多编程相关知识,请访问:编程入门!!

    以上就是wxss和css3的区别是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:wxss css3
    上一篇:react是mvvm框架吗 下一篇:html/css中行内元素和块级元素的区别是什么
    大前端线上培训班

    相关文章推荐

    • 小程序 WXSS wx:key的作用以及使用实例• 如何用vscode将less编译成wxss• 微信小程序实时监听less文件编译成wxss文件,全局命令工具和less-to-wxss• css3怎么实现字体倒影• css3 skew()属性怎么用

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网