一.WXSS解析
WXSS是一套样式语言，用于描述WXML的组件样式。
WXSS用来决定WXML的组件应该怎么显示。
为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，微信对CSS进行了扩充和修改。
与CSS项目扩展的特性有：
尺寸单位： rpx 、rem
样式导入：使用@import语句可以导入外联样式表
官方建议：开发微信小程序时设计师可以用ipone6作为视觉稿的标准。
二.选择器
选择器分为六种
image.png
. class：组件指定class ，WXSS设计对应的样式，只用class是前面带点“.”的。
<image class="head" src="../../images/tab_main_bi_select.png"> </image>
.head {
width: 50rpx;
height: 50rpx;
}
#id：组件指定的id，对应WXSS中的样式。
<button id='button_id'>点击按钮</button>
#button_id{
padding:10rpx;
}
element：值这个页面所有的对应控件的样式。
<button>点击按钮</button>
<button>点击按钮1</button>
//页面的所有button都有内间距
button{
padding:10rpx;
}
三.尺寸单位
rpx：规定屏幕宽度为750rpx
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
rem：规定屏幕宽度为20rem。
以上是WXSS针对于CSS扩展的两个尺寸单位，除此之外CSS所用的单位也都是可以使用，如px像素等。
四.WXCSS 样式
1.样式之高度、宽度
height
width
单位可以用px,rpx,rem或者百分比
.head {
width: 50rpx;
height: 50rpx;
}
2.样式之内间距
pading 、 pading-right、 pading-left、 pading-bottom 、pading-top
.time {
padding-right: 10rpx;
}
3.样式之外间距
margin 、 margin-right、 margin-left、 margin-bottom 、margin-top
4.样式之字体颜色
color
5.样式之背景
background
6.样式之字体
font-size
7.样式之布局
dipaly：flex；（悬浮样式）
flex-direction:row(横向排列，各个子块必须定义宽度或flex，高度默认为容器高度)
flex-direction:column(纵向排列，各个子块必须定义高度或flex，宽度默认为容器宽度)
flex：1 （类似于Android的weight=1）
五.WXSS的格式
WXSS的格式固定，
选择器{
属性：值；
}
六.WXSS的实例
.item {
border-bottom: 1rpx solid gray;
width: 100%;
padding: 10rpx;
display: flex;
flex-direction: row;
}
border-bottom：1个像素的实线蓝色边框 颜色可以用16进制 也可以RGB颜色，或者颜色的名称， 可以单独指边框 border-left border-right
display ：flex 自适应
flex-direction：row 横向排列 column 纵向排列
flex：1 就是剩下的宽度都给它类似于Android中权重为1
网友评论