微信小程序-从 Android 开发层面简单理解 WXSS 中的样式

微信小程序 WXSS 文档

官方文档地址，官方文档只是简单介绍了基础的 WXSS，具体的CSS样式属性还是没有，这对于前端小白不是很友好，所以笔者这里从 Android 开发的层面去记录一些常见的 CSS样式。建议阅读文章前先看官方文档。

常见的样式属性

推荐看这篇博文，基本上常用的都总结了微信小程序wxss设置样式

View 显示位置

参考布局文件

  <view class='container'>
    <view class='view1'>
      1
    </view>
    <view class='view2'>
      2
    </view>
    <view class='view3'>
      3
    </view>
    <view class='view4'>
      4
    </view>
    <view class='view5'>
      5
    </view>
  </view>

参考样式文件

.container{
  display: inherit;
  background-color: hsl(234, 56%, 57%);
}

.view1{
  background-color: red;
}
.view2{
  background-color: gold;
}
.view3{
  background-color: green;
}
.view4{
  background-color: gray;
}
.view5{
  background-color: greenyellow;
}

display: flex;

display 控制的是 view 的显示规则，它的常见属性值有flex，inline-block，inherit 等。
默认不加dispaly样式的效果如下：

dispaly:flex;的效果如下：可以看出display:flex和默认效果是一样的，它的作用是将对象作为弹性伸缩盒显示。相当于Android中的wrap_content

dispaly:inline-block;的效果如下：相当于Android中的wrap_content,父布局也是wrap_content,所以居左显示

dispaly:inherit;的效果如下：相当于Android中的match_parent，父布局是match_parent使用了该属性后子布局也就继承了父布局，所以也是match_parent

flex-direction: row;

相当于 LinearLayout布局的 orientation 用于控制 子View 的显示方向

flex-direction: row; 子控件水平摆放
flex-direction: column; 子控件垂直摆放

width: 92%;

控件的宽度占父布局的 92%，可以是具体的像素值。

height: 40px;

控件的高度为 40px，小程序中推荐使用 rpx作为单位。建议在水平方向上尽量使用rpx单位，因为屏幕的宽度是固定，而屏幕高度是可以滑动的，所以在高度上可以使用px单位。

文字 显示位置、显示大小

text-align: center;

文本居中显示
text-align的其他可选值：justify：实现两端对齐文本效果。inherit: 规定应该从父元素继承 text-align 属性的值

line-height: 60px;

行高，在设置 text 居中时需要设置行高，不然是不会不居中。就像这样（未设置行高）

font-size: 15px;

设置字体的大小,相当于Android 中 的 textSize

View 颜色、背景色、透明度

opacity: 0.2;

设置透明度，相当于android中的 alpha

color: #000000;

设置字体的颜色，相当于Android 的textColor

background-color: red;

设置字体的颜色，相当于Android 的background

View 的内边距、外边距

margin: 0 auto;

设置View的外边距，相当于Android 的margin。它的显示顺序是上、右、下、左，margin:0 auto; 表示上下0px，左右 自适应 也是标准的View居中写法。

padding-top: 20px;

设置View的内边距，相当于Android 的padding。可以设置上下左右的内边距。

View 的圆角

border-top-left-radius: 5px;

设置View的圆角，相当于Android 的shape 中的radius。可以设置上下左右的圆角。

View 的位置

position: fixed;

View 的定位 absolute 绝对定位 relative 相对定位 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定 static 默认值。没有定位，元素出现在正常的流中

待具体的使用截图验证

float: right;

浮动，float: right;表示元素向右浮动

待具体的使用截图验证