微信小程序实训之3设置全局css样式

张哥编程

发布于 2024-12-13 06:47:07

40600

代码可运行

文章被收录于专栏：云计算linux云计算linux

运行总次数：0

代码可运行

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）的区别！

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