2.3 装裱与布局——WXSS基础

使用JavaScript可以进行界面数据和交互逻辑的处理，使用WXML可以进行页面结构的搭建，使用WXSS可以进行页面布局和样式的细化调整。WXSS是专供小程序使用的一套样式表语言，与网页开发中的CSS语法基本一致，只是针对小程序做了一些补充和修改。

2.3.1 WXSS与CSS

对于编写CSS代码来说，最重要的是掌握选择器的用法及熟悉样式属性的用法。WXSS与CSS的选择器和属性基本一致，相较于CSS，WXSS优化了尺寸单位，新增了样式导入。

关于尺寸，WXSS除支持CSS定义的全部尺寸单位外，还额外定义了一个自适应像素单位（rpx），可使用的尺寸单位如表2-5所示。

通过表2-5列举的尺寸单位可以精准地控制组件的渲染尺寸，如修改index.wxml代码，示例代码如下：

在index.wxss中编写样式，示例代码如下：

运行代码，效果如图2-8所示。

上面的display属性设置组件的展示模式，默认text组件为行内元素，将其更改为块级元素使尺寸设置生效。

关于样式表的导入其实非常简单，组件的导入也一样，我们可以将一些通过的样式定义在公共样式表文件中，在需要使用的页面进行导入即可。例如，在common文件夹下，新建一个命名为common.wxss的文件，编写如下代码：

在index.wxss中直接进行引用即可，示例代码如下：

在引用时需要注意路径的正确性。

2.3.2 WXSS选择器

选择器的作用是匹配文档中的元素，最简单的选择器是元素选择器，示例代码如下：

上面WXSS代码设置页面中所有text组件文字颜色为绿色。在选择元素时，也可以进行组合选择，示例代码如下：

上面的代码设置页面中所有text组件和button组件的文本颜色为绿色。

类选择器会匹配元素的class属性，如下面的text组件设置其class属性为label：

使用符号“.”加上class名可以选中这个元素，示例代码如下：

id选择器会匹配元素的id属性，如下面的text组件设置其id属性为label：

使用符号“＃”加上id名可以选中这个元素，示例代码如下：

也可以通过标签的任意一个属性选中元素，示例代码如下：

上述代码的作用是选中所有设置id属性值的元素，也可以根据属性值进行精准选择，示例代码如下：

后代选择器可以精准地选中某个父标签下的子标签，修改index.wxml文件，示例代码如下：

上面的代码创建了两个text标签，其中一个包裹在view标签内，要选中它，可以使用后代选择器，示例代码如下：

与后代选择器对应的还有子选择器，后代选择器会选中父标签内所有的指定元素，无论层级结构如何；而子选择器只会选择父标签中的子元素，子元素的子元素不会被选择。示例代码如下：

兄弟选择器用在同级元素的选择中，修改index.wxml文件，示例代码如下：

使用如下选择器可以选中紧跟view组件后面的text组件元素：

2.3.3 WXSS背景相关属性

WXSS中提供了许多背景属性，开发者可以对组件的背景进行自定义。常用背景设置相关属性如表2-6所示。

2.3.4 WXSS文本相关属性

文本相关属性用来对元素中的文字进行设置，其可以对文字的字体、字号、颜色、对齐方式、缩进等属性进行配置。文本相关属性如表2-7所示。

2.3.5 WXSS边距与边框相关属性

边距用来控制组件与组件之间、组件与组件内部子组件之间的布局效果。边框相关属性用来设置组件的边界显示效果，如表2-8所示。

2.3.6 WXSS元素定位相关属性

在默认情况下，小程序的页面布局和网页一样，是从上到下流式布局的。与CSS不同的是，WXSS提供了一套弹性盒的布局方式，关于弹性盒布局，后面在介绍小程序页面布局技术时会详细介绍，本节仅列举设置元素显示和元素定位方式的相关属性，如表2-9所示。

相对定位可以使元素相对于其当前位置进行调整，通过设置left、right、top、bottom属性分别进行左、右、上、下的调整，示例代码如下：

运行代码，效果如图2-9所示。

fixed绝对定位相对于页面窗口进行定位，不会占据流式布局的空间，使用它可以将组件固定在页面窗口的某个位置，并且不会随页面的滚动而滚动。通过设置left、right、top、bottom属性分别进行相对页面窗口左、右、上、下距离的调整，示例代码如下：

运行代码，效果如图2-10所示。

absolute绝对定位和fixed绝对定位类似，只是absolute是相对父容器的绝对定位，会跟随父容器滚动。

2.3.7 其他显示效果相关属性

WXSS中还定义了许多元素的尺寸设置、透明度设置等属性，如表2-10所示。