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

平凡也就两个字: 懒和惰;
成功也就两个字: 苦和勤;
优秀也就两个字: 你和我。
跟着我从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;
}

 

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