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

微信小程序 WXSS 文档

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

常见的样式属性

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

View 显示位置

参考布局文件

1

2

3

4

5

参考样式文件

.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;表示元素向右浮动

待具体的使用截图验证

本文同步分享在 博客“_龙衣”(CSDN)。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。