微信小程序开发教程5：设置全局css样式

2024-05-26 02:07:40

平凡也就两个字: 懒和惰;
成功也就两个字: 苦和勤;
优秀也就两个字: 你和我。
跟着我从0学习JAVA、spring全家桶和linux运维等知识，带你从懵懂少年走向人生巅峰，迎娶白富美！
关注微信公众号【 IT特靠谱 】，每天都会分享技术心得~

微信小程序开发教程5：设置全局css样式

设置全局css样式。目的在于统一所有page页面page,text,view,navigator,swiper,swiper-item,image等组件的padding、margin和border-size样式。

1 设置全局边距

我们需要在app.wxss中设置page,text,view,navigator,swiper,swiper-item,image等组件的全局padding为0px，margin为0px，border-sizing为border-box 。

page,text,view,navigator,swiper,swiper-item,image{/*设置组件全局边距*/margin: 0px;padding: 0px;/** 指定元素的宽或高包含padding和border，不包含mmargin。* 如果不设置默认为content-box，元素的宽或高不包含padding和border*/box-sizing: border-box;
}

因为border-sizing全局样式设置为border-box，所以全局pages默认情况下：

（1）组件总宽度 = 边框border + 内边距pardding + 内容宽度

（2）组件总高度 = 边框border + 内边距pardding + 内容高度

下图为网上找的截图，可以看到border-sizing属性两个值（content-box和border-box）的区别！

2 设置text标签全局字体大小

为了统一整个app小程序页面的字体大小，我们需要在app.wxss中设置page和text标签内容的全局字体大小为：30rpx。如下：

/*全局page和text内容字体大小*/
page,text{font-size: 30rpx;
}

3 app.wxss全局样式全部代码

/**app.wxss**/
page,text,view,navigator,swiper,swiper-item,image{/*设置组件全局边距*/margin: 0px;padding: 0px;/** 指定元素的宽或高包含padding和border，不包含mmargin。* 如果不设置默认为content-box，元素的宽或高不包含padding和border*/box-sizing: border-box;
}/*全局page和text内容字体大小*/
page,text{font-size: 30rpx;
}

如果你有疑问或需要技术支持，关注公众号联系我吧~

微信小程序开发教程5：设置全局css样式相关推荐

微信小程序开发语言（微信小程序开发教程）详细步骤
微信小程序开发语言开发微信小程序用什么语言 1.微信小程序开发所需要的语言比较特别,首先介绍一下需要使用到的文件类型大致分为:WXML(WeiXin Mark Language 微信标记语言).WX ...
微信小程序开发教程：项目一微信小程序入门课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题 1.请简述微信开发者工具中调试器功能. 2.请简述微信小 ...
微信小程序开发教程手册文档
微信小程序开发教程文档微信小程序是什么?微信小程序如何开发?微信小程序开发教程有哪些?本教程将从微信小程序本身,结合微信官方-微信小程序开发工具,带你一步步创建一个微信小程序,并在手机操作预览该小程 ...
微信小程序开发教程：项目四组件布局课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题 1.请简单地介绍微信小程序flex布局的使用. 2.如何 ...
微信小程序开发教程：项目二微信小程序开发基础课后习题
<微信小程序开发教程>主编/黄寿孟易芳陶延涛湖南大学出版社目录一.单选题二.多选题三.判断题四.填空题五.简答题 1.请简单描述页面样式的单位rpx与px的关系. 2.简 ...
微信小程序开发教程！博卡君第二弹【微信小程序项目结构以及配置】
前面我们转了博卡君通宵吐血赶稿的微信小程序开发教程,当时只更新了两章,现在接着发布第三章:微信小程序项目结构以及配置,第四章:微信小程序首页面开发,以下是微信小程序教程找到创建的 demo 文件夹, ...
微信小程序开发分销制度济南_花店微信小程序开发教程
如何将自己的鲜花商品快速配送出去,避免鲜花过期浪费,是很多传统花店商家的难题.不过随着微信小程序的出现,这一难题也渐渐得到了解决.花店商家可以通过自己的小程序商城,打通线上渠道,可以加大推广.扩大销量 ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序开发教程第八章：微信小程序分组开发与左滑功能实现
接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开 ...

最新文章

热门文章