wxss和css3的区别是什么

PHP中文网 JavaScript

本文摘自PHP中文网，作者青灯夜游，侵删。

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

wxss和css3的区别

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

例如我在wxss中书写如下

1

background-image: url(imageB.png);

控制台打印：

1

pages/index/index.wxss 中的本地资源图片无法通过 WXSS 获取，可以使用网络图片，或者 base64，或者使用<image/>标签。

1 .小程序中的文档流中不存在window、document对象，即不能使用jquery与zepto等js库区操作dom。这也从另一方面致使css3属性：position 在使用时需要一些注意事项。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

使用时应注意，为基础节点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类型值(注意 " " 和 ' ' 之间的嵌套关系’’)。如下：

1

<view id='imageBtn' style='display:{{imageBtn_display?"inherit":"none"}}' catchtouchmove='touchRotateAction'></view>

3.其他

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

支持过渡 transition。

更多编程相关知识，请访问：编程入门！！

以上就是wxss和css3的区别是什么的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

css3中background-size实现背景图片大小可自定义的几种效果（代码实例 ）

css3如何实现颜色渐变效果

transition-property属性怎么用

运用css3动画需要运用什么规则

html5实践-详细介绍css3中的几个属性text-shadow、box-shadow和border-radius

css3实现文字折纸效果的方法（代码示例）

巧用css steps()函数实现随机翻牌效果！

纯css3实现信纸/同学录效果（代码示例）

css权重是什么？css权重的介绍

css3怎么将滚动条隐藏

更多相关阅读请进入《wxss》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...