微信小程序-margin和padding的区别

为了方便,先看一个图,外面的是margin,是外边距,padding是内边距。
在这里插入图片描述

margin

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

margin:10px 5px 15px 20px;
上外边距是 10px
右外边距是 5px
下外边距是 15px
左外边距是 20px

可以使用负值。

padding

这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。
实例:

padding:10px 5px 15px 20px;
上内边距是 10px
右内边距是 5px
下内边距是 15px
左内边距是 20px

不允许使用负值

微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。同时,它也具有“用完即走”的特点,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。 在微信小程序实现一个题库功能,通常包括以下几个步骤: 1. 设计题库的数据结构,通常使用JSON数组来存储题库的题目和答案。 2. 在小程序的页面文件(.wxml)设计题目展示和选项切换的界面。 3. 在对应的页面逻辑文件(.js)编写处理题目切换和用户选择的逻辑。 4. 使用wxss文件对页面的样式进行美化。 以下是一个简单的示例代码实现: 页面结构(.wxml): ```xml <view class="container"> <view class="question">{{currentQuestion.question}}</view> <view class="options"> <view class="option" wx:for="{{currentQuestion.options}}" wx:key="index" bindtap="chooseOption" data-index="{{index}}">{{item}}</view> </view> <view class="navigation"> <button bindtap="prevQuestion" wx:if="{{currentQuestionIndex > 0}}">上一题</button> <button bindtap="nextQuestion" wx:if="{{currentQuestionIndex < totalQuestions - 1}}">下一题</button> </view> </view> ``` 页面样式(.wxss): ```css .container { padding: 20px; } .question { font-size: 18px; margin-bottom: 20px; } .options .option { padding: 10px; border: 1px solid #ccc; margin-bottom: 10px; display: block; } .navigation button { margin: 10px; } ``` 页面逻辑(.js): ```javascript Page({ data: { questions: [ { question: '1+1等于多少?', options: ['1', '2', '3'], answerIndex: 1 }, { question: '太阳系有多少颗行星?', options: ['8', '9', '10'], answerIndex: 2 }, // 更多题目... ], currentQuestionIndex: 0 }, onLoad: function() { this.setData({ currentQuestion: this.data.questions[this.data.currentQuestionIndex], totalQuestions: this.data.questions.length }); }, chooseOption: function(e) { const index = e.currentTarget.dataset.index; const isCorrect = index === this.data.questions[this.data.currentQuestionIndex].answerIndex; wx.showToast({ title: isCorrect ? '回答正确' : '回答错误', icon: isCorrect ? 'success' : 'none', duration: 2000 }); }, nextQuestion: function() { this.setData({ currentQuestionIndex: this.data.currentQuestionIndex + 1, currentQuestion: this.data.questions[this.data.currentQuestionIndex] }); }, prevQuestion: function() { this.setData({ currentQuestionIndex: this.data.currentQuestionIndex - 1, currentQuestion: this.data.questions[this.data.currentQuestionIndex] }); } }); ``` 请注意,这个示例是基础的题库小程序实现,实际开发可能需要考虑更多的功能和细节,例如题目的随机化、用户答题记录、正确答案的解析等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值