微信小程序 学习笔记 WXSS解析

一.WXSS解析

WXSS是一套样式语言，用于描述WXML的组件样式。

WXSS用来决定WXML的组件应该怎么显示。

为了适应广大的前端开发者，WXSS具有CSS大部分特性。同时为了更适合开发微信小程序，微信对CSS进行了扩充和修改。

与CSS项目扩展的特性有：
尺寸单位： rpx 、rem
样式导入：使用@import语句可以导入外联样式表

官方建议：开发微信小程序时设计师可以用ipone6作为视觉稿的标准。

二.选择器

选择器分为六种

image.png

. class：组件指定class ，WXSS设计对应的样式，只用class是前面带点“.”的。

.head {
  width: 50rpx;
  height: 50rpx;
}

#id：组件指定的id，对应WXSS中的样式。

点击按钮

#button_id{
  padding:10rpx;
}

element：值这个页面所有的对应控件的样式。

点击按钮
点击按钮1

//页面的所有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