4.设置全局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）的区别！ 20201109182539709.png

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;
}

20201109205928987.png