微信小程序开发使用的预处理样式使用过程就像搭积木一样便捷开发

本文链接：https://blog.csdn.net/u011096003/article/details/79288183

本文介绍了微信小程序开发中使用的一套预处理样式，包括各种常用的布局、颜色、边框、文字样式等，旨在简化开发流程，提高开发效率，让开发者能够像搭积木一样构建页面。

摘要由CSDN通过智能技术生成

 
  /**app.wxss**/ 
 
  page 
    
  {
    
  font-size: 
    
  32 
  rpx 
  ; 
 
  background-color: 
   #efeff4 
  ; 
 
  } 
 
  /*容器 */ 
 
  .container 
    
  {
    
  width: 
    
  100% 
  ; 
 
  height: 
    
  auto 
  ; 
 
  } 
 
  view 
  , 
    
  navigator 
    
  {
    
  box-sizing: 
    
  border-box 
  ; 
 
  display: 
    
  block 
  ; 
 
  padding: 
    
  0 
  ; 
 
  margin: 
    
  0 
  ; 
 
  } 
 
  /*居中 */ 
 
  .center 
    
  {
    
  margin: 
    
  0 
    
  auto 
  ; 
 
  } 
 
  /*边框 */ 
 
  .bb 
    
  {
    
  border-bottom: 
    
  1px 
    
  solid 
   #e5e5ec 
  ; 
 
  } 
 
  .bt 
    
  {
    
  border-top: 
    
  1px 
    
  solid 
   #e5e5ec 
  ; 
 
  } 
 
  .bl 
    
  {
    
  border-left: 
    
  1px 
    
  solid 
   #e5e5ec 
  ; 
 
  } 
 
  .br 
    
  {
    
  border-right: 
    
  1px 
    
  solid 
   #e5e5ec 
  ; 
 
  } 
 
  .b 
    
  {
    
  border: 
    
  1px 
    
  solid 
   #c9c9c9 
  ; 
 
  } 
 
  /*背景颜色 */ 
 
  .bc-1 
    
  {
    
  background-color: 
   #fff 
  ; 
 
  } 
 
  .bc-2 
    
  {
    
  background-color: 
   #efeff4 
  ; 
 
  } 
 
  .bc-3 
    
  {
    
  background-color: 
   #999 
  ; 
 
  } 
 
  /*隐藏元素 */ 
 
  .hide 
    
  {
    
  display: 
    
  none 
  ; 
 
  } 
 
  /*显示元素 */ 
 
  .show 
    
  {
    
  display: 
    
  block 
  ; 
 
  } 
 
  /*flex布局 两边对齐 子元素居中 */ 
 
  .fbc 
    
  {
    
  display: 
    
  flex 
  ; 
 
  justify-content: 
    
  space-between 
  ; 
 
  align-items: 
    
  center 
  ; 
 
  } 
 
  /*flex布局 居中对齐 子元素居中 */ 
 
  .fac 
    
  {
    
  display: 
    
  flex 
  ; 
 
  justify-content: 
    
  space-around 
  ; 
 
  align-items: 
    
  center 
  ; 
 
  } 
 
  /*flex布局 从左到右排序 子元素居中 */ 
 
  .fsc 
    
  {
    
  display: 
    
  flex 
  ; 
 
  justify-content: 
    
  flex-start 
  ; 
 
  align-items: 
    
  center 
  ; 
 
  } 
 
  /*flex布局 占用的比例 */ 
 
  .f-1 
    
  {
    
  flex: 
    
  1 
  ; 
 
  } 
 
  .f-2 
    
  {
    
  flex: 
    
  2 
  ; 
 
  } 
 
  .f-3 
    
  {
    
  flex: 
    
  3 
  ; 
 
  } 
 
  /*flex布局 居中对齐 不换行 */ 
 
  .faw 
    
  {
    
  width: 
    
  100% 
  ; 
 
  display: 
    
  flex 
  ; 
 
  justify-content: 
    
  space-around 
  ; 
 
  flex-wrap: 
    
  wrap 
  ; 
 
  } 
 
  /*flex布局 两边对齐 不换行 */ 
 
  .fbw 
    
  {
    
  width: 
    
  100% 
  ; 
 
  display: 
    
  flex 
  ; 
 
  justify-content: 
    
  space-between 
  ; 
 
  flex-wrap: 
    
  wrap 
  ; 
 
  } 
 
  /*flex布局 从左到右排序 不换行 */<