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

迈不过友情╰ 2022-12-19 08:52 850阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70]: /images/20221120/ac0ad5713e0c4892b0eb2dc6dfe4f1de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201109205928987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200924184926530.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUX01vc3Q=,size_16,color_FFFFFF,t_70