3.1 内联样式

小程序页面的样式除了可以写在WXSS样式文件中，也可以像HTML一样将样式代码写在当前的页面文件中，在页面文件中使用标签上的style属性控制样式。在小程序中，每个组件上都有一个style的公共属性，用于设置组件的样式。组件上的style属性定义的样式会在小程序运行时被解析，如果是非必要的情况，不建议直接将样式定义在组件的style属性中，这会影响页面渲染速度。

小程序使用内联样式的代码如例3所示。

【例3】小程序的内联样式代码

在实际项目开发中，为了方便统一管理样式属性，我们会将WXSS文件按照不同的模块拆分成多个样式文件，也会封装公共的样式文件来减少代码的冗余。这种样式模块化的操作就需要使用到 @import样式导入语句，具体语法如例4所示。

【例4】导入样式文件

/* index.wxss */

@import “./base.wxss”;

.body {

border: 1px solid #000;

height: 30%;

text-align: center;

}

在index.wxss文件中导入当前目录下的base.wxss样式文件，小程序运行时会同时在当前页面解析index.wxss和base.wxss两个文件中的样式效果，但是在使用样式导入时，尽量避免多个文件中出现同名选择器的情况。

4 布局

WXSS实现了CSS布局的大部分规范，但是在细节上还是有些变化，这就导致相同的样式设置在小程序中的界面展示存在一定的差距。本小节主要讲述关于CSS布局的一些基础知识，例如盒子模型、浮动定位、Flex布局等，这些基础知识在WXSS也是通用的。在小程序中编写WXSS样式代码时，要打开“开启上传代码时样式文件自动补全”功能，否则会出现Flex布局在不同终端设备上的兼容性问题。

4.1 盒子模型

在传统的Web页面开发中，HTML中的所有元素都可以想象成盒子，一个HTML的元素就是一个盒子，那么在小程序的界面中，每一个组件就是一个盒子。盒子模型也是CSS布局的基础，每个盒子都是由内容（content）、内边距（padding）、边框（border）、外边距（margin）这四个部分组成。这些盒子模型看起来像个矩形框，矩形框中的所有项默认宽度均为0，盒子模型效果如图3所示。

图3 盒子模型

在盒子模型中，元素的宽度、高度就是内容区域的宽度和高度，内容区域不包括内边距、边框和外边距。我们通常会使用width、height两个属性来控制盒子的宽和高，然后再用padding、border、margin三个属性来分别控制盒子的内边距、边框和外边距。

在使用盒子模型时，还要考虑到兼容性的问题。盒子模型根据浏览器具体实现可分为W3C的标准盒子模型和IE盒子模型，这两种盒子模型在宽度和高度的计算上不一致，IE盒子模型的宽度和高度是包含内边距和边框的，我们这里讲述的主要是W3C的盒子模型，WXSS完全遵守W3C盒子模型规范。

CSS中的布局都是基于盒子模型，不同类型元素对盒子模型的处理也是不同的，块级元素的处理就和行内元素不同，浮动元素和定位元素的处理也是不相同的。

4.2 浮动和定位

了解过盒子模型后，我们基本上知道了布局的基本思路，可以把页面视为一个大的盒子，然后在大盒子中按照不同的方式“摆放”大小各异的盒子。在“摆放”盒子的过程中，免不了要使用到浮动和定位。浮动是让元素脱离正常的文档流，而定位则是允许我们定义元素相对于其正常位置应该出现在哪里，定位的参照物可以是相对于父元素，也可以是相对于浏览器窗口本身的位置。浮动和定位也是页面设计中常用的布局方案。

浮动不完全是定位，同时它也不是正常流布局，通过设置float属性，浮动框可以向左或者向右移动，直到其外边缘碰到父元素边框或浮动框的边框为止。由于浮动框不在正常文档流中，所以其表现与普通文档流中的表现不一样，其他内容会环绕在浮动框的周围，效果如图4所示。

图4 浮动示例

在小程序首页的index.wxml编写如例5所示的代码。

【例5】index.wxml的代码

容器默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis），主轴开始的位置（及主轴与边框的交叉点）叫<code>main start，结束的位置叫main end, main start和main end和主轴的方向有关；交叉轴开始的位置叫cross start，结束的位置叫cross end, cross start和cross end和交叉轴方向有关。项目默认沿主轴从主轴开始的位置到主轴结束的位置进行排列，项目在主轴上占据的空间叫main size，在交叉轴上占据的空间叫cross size。

容器支持的属性有：

display：通过设置display属性，指定元素是否为Flex布局。flex-direction：指定主轴方向，决定了项目的排列方式。flex-wrap：排列换行设置。flex-flow:flex-direction和flex-wrap的简写形式。justify-content：定义项目在主轴上的对齐方式。align-items：定义项目在交叉轴上的对齐方式。align-content：定义多根轴线的对齐方式，如果只有一根轴线，该属性不起作用。

项目支持的属性有：

order：定义项目的排序顺序。flex-grow：定义项目的放大比例。flex-shrink：定义项目的缩小比例。flex-basis：定义在分配多余空间之前，项目占据的主轴空间（mainsize）。flex:flex-grow、flex-shrink和flex-basis的简写。align-self：用来设置单独的伸缩项目在交叉轴上的对齐方式，可覆盖默认的algin-items属性。

布局是构建小程序界面的基础，在设计界面布局时如果属性设置有误的话，会出现界面混乱的情况，所以在使用布局时需要根据需求选用合适的定位方式。如果布局中使用到了浮动，还需要考虑浮动和文档流的关系，在合适的位置一定要清楚浮动。

5 本章小结

本章主要讲解小程序的WXSS相关特性，WXSS对CSS的部分特性做了拓展和补充，例如在WXSS中为了适配不同尺寸的屏幕使用了rpx单位，并在WXSS还可以使用 @import语句导入其他样式文件，从而实现样式的模块化，减少代码冗余。WXSS也支持部分CSS的布局属性，并且对CSS的盒子模型、浮动定位、Flex布局等做了简单介绍，由于本章内容是以WXSS的新特性为主，所以要想更详细地学习CSS布局操作，请查阅相关的CSS学习资料，本章不做赘述。