微信小程序 - wxss

WXSS

1.class和id选择器

• class选择器可以多次使用，可以重复

  .red{
  	background:red;
  }
  

• id选择器只能使用一次，不能重复

  #title{
  	background:green;
  }
  

2.颜色的三种设置方式

• 十六进制
• RGB
• 颜色名称

3.CSS中文本的常用样式

• 文本的对齐方式

  • text-align: center 文本居中对齐
  • text-align：left 文本居左对齐
  • text-align：right 文本居右对齐

• 文本修饰

  • text-decoration：overline 上划线
  • text-decoration：line-through 中间划线
  • text-decoration：underline 下划线

• font-size设置字体大小

4.CSS边框与边距

• margin 外边框
• padding 内边距 （上、右、下、左）
• border 边框，实线

5.CSS边框border（三个样式）

• border-style设置样式

  • border-style：solid 实现
  • border-style：dashed 虚线
  • border-style：dotted 点线

• border-width

• border-color

• 三个样式可以一起写：

  • border：2rpx yellow solid

6.border-radius圆角边框

7.flex布局

用于父元素的属性

• display：flex 默认方向row
• flex-direction：主轴方向
• flex-wrap：wrap 使元素动态调整
• justify-content：主轴上的排列
• align-item：交叉轴方向上的排列方式

用于子元素的属性

• flex-grow：1 占据剩余的空间
• flex-shrink：0 不可压缩，默认为1
• flex-basis：盒子的初始值
• flex：1 元素分一份（包含上面三个元素）
• align-self：改变父元素对自身的影响
• order：排序书顺序（数字，默认为0）