标梵微信插件开发教程5：建立全局css风格

设置全局css样式。目的在于统一所有page页面page,text,view,navigator,swiper,swiper-item,image等组件的padding、margin和border-size样式。标梵微信插件开发教程5：建立全局css风格
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;
  }
  本文来源:标梵互动(https://www.biaofun.com/)