微信小程序样式与布局详解

text{color: red;}

class 选择器：

语法：

.类选择器名 {属性：属性值;}

选择器的名称自定义，名称应当醒目且具有意义，页面中一旦设置了类别选择器，页面中该标签都具有相同的样式。示例代码如下。

<text class="title">这是一行文字</text><text class="title">这是一行文字</text><text class="title">这是一行文字</text>

.title{color: red;}

id 选择器：
语法：

#选择器名 {属性：属性值;}

选择器的名称自定义，名称应当醒目且有意义。示例代码如下。

<text id="p-style">这是一行文字</text><text>这是一行文字</text>

#p-style{color: red;}

2.2、复合选择器

多元素选择器：
多元素选择器用于同时设置多个标签具有共同的样式。语法：

选择器，选择器，选择器，…{共有属性：属性值，}

选择器之间用逗号隔开。示例代码如下。

<view>我是 view 组件</view><text>我是 text 组件</text>

view, text{background-color: red;}

后代元素选择器：
后代元素选择器为标签的后代设置样式。语法：

选择器 1 选择器 2 选择器 3{属性：属性值，}

选择器之间用空格隔开。示例代码如下。

<view><image>存放图片</image></view>

view image{width: 50rpx;height: 100rpx;}

其中，view image 为后代元素选择器，设置 <view> 标签嵌套中的 <image> 图片大小，宽度为 50rpx，高度为 100rpx，后代元素选择器用于对特定元素进行设置。

三、基础样式

3.1、文本样式

文本样式决定页面中文字的排版，可以设置字符缩进、文字颜色、字符间距、文本对齐方式和装饰文字等，常用属性如表所示。

<view class="content">对段落首行缩进、文字颜色、字符间距、行高、水平对齐方式和装饰效果进行设置。</view>

.content{text-indent: 2em;color: #00f;letter-spacing: 20rpx;line-height: 60rpx;text-align: left;text-decoration: underline;}

3.2、字体样式

<text>设置字体样式</text>

text{font-family:"Microsoft YaHei";font-size: 50rpx;font-style: oblique;font-weight: bold;}

四、盒子模型

4.1、概述

当对一个文档进行布局 (layout) 时，浏览器的渲染引擎会根据标准之一的 CSS 基础盒子模型 (CSS basic box model)，将所有元素表示为一个个矩形的盒子。CSS 决定这些盒子的大小、位置及属性（例如颜色、背景、边框尺寸等）。盒子模型规定了内部处理的元素内容 (content)、内边距 (padding)、边框 (border) 和外边距 (margin) 的样式。

在盒子模型结构中，最内层为盒子的内容 (content)，向外依次是内边距 (padding top、padding-right、padding-bottom、padding-left)、边框 (border-top、border-right、border-bottom、border-left) 以及外边距 (margin-top、margin-right、margin-bottom、margin-left)。内边距、边框和外边距分别都有上、下、左、右 4 个属性，这 4 个属性可以同时应用于一个元素，也可以单独或部分应用于同一个元素。

在盒子模型中，很多样式需要指定方向，通常会有 4 个属性值，在 WXSS 文件中常遵循 TRBL 原则和相同合并原则来简化代码。

1. TRBL 原则
TRBL 原则按照 top、right、bottom、left 的方向来设置属性。

padding-top:1rpx;padding-right:2rpx;padding-bottom:3rpx;padding-left:4rpx;

上述代码遵循了 TRBL 原则，按照上、右、下、左的顺序顺时针的方向将代码合并成一行，其效果等同于下方代码：

padding:1rpx 2rpx 3rpx 4rpx;

2. 相同合并原则：

1. 上、下、左、右的属性值相同时，简化为 1 个值。
   示例代码如下：

padding:1rpx 1rpx 1rpx 1rpx; padding:1rpx;

2. 上、下和左、右的属性值分别相同时，简化为 2 个值。
   示例代码如下：

padding:1rpx 2rpx 1rpx 2rpx; padding:1rpx 2rpx;

3. 左、右的属性值相同时，简化为 3 个值。
   示例代码如下：

padding:1rpx 2rpx 3rpx 2rpx; padding:1rpx 2rpx 3rpx;

4.2、盒子模型属性

width 与 height

盒子模型使用 width 和 height 定义内容区域的大小。除此之外还可以通过 max-height、min-height 设置最大高度和最小高度，属性如表所示。

padding 与 margin

padding 指内边距，即内容与边框之间的部分。内边距的属性有 4 种，分别为 padding-top、padding-right、padding-bottom 和 padding-left，其属性值可以是像素，也可以是百分比，通过设置内边距可以控制内容与边框的间隔。

margin 指外边距，主要用于设置元素之间的距离。外边距的属性有 4 种，分别为 margin-top、margin-right、margin-bottom、margin-left，其使用方法与内边距类似。padding 与 margin 的属性如表所示。

border

边框是内容与外部填充的边界，使用边框属性可以设置边框的样式，常见属性如表所示。

五、元素类别

小程序页面布局是指页面元素在页面中的显示位置，而页面元素与其他页面元素之间的位置关系会决定该页面元素在页面中的显示位置。所以在学习小程序的页面布局之前，开发者需要掌握页面元素的分类。根据展示特点的不同，页面元素分为块级元素、行内元素、内联块级元素 3 种。

5.1、块级元素

块级元素 (block element) 是一种以块状方式展示的容器，高度和宽度均可设置，默认宽度为 100%，默认占一行的高度。在一行中两个块级元素无法并列排放 (float 浮动后除外)，两个块级元素连续出现时，会在页面中自动换行显示。块级元素常作为页面布局的组织结构，内部可以嵌套块级元素和行内元素，小程序中 <view> 容器默认为块级元素，内部可嵌入 <text> <image> 等。通过设置属性 display:block 能够将元素设置为块级元素。

<view class="red">第一个块级元素</view><view class="blue">第二个块级元素</view><view class="green">第三个块级元素</view><view class="gray">第四个块级元素</view>

.red{background-color: red;}.blue{background-color: blue;}.green{background-color: green;}.gray{background-color: gray;}view{display: block;height: 200rpx;border: 1px solid black;}

5.2、行内元素

行内元素 (inline element) 一般嵌套在块级元素中使用，它只能容纳文本或者其他行内元素，高度和宽度均不可设置，WXML 的 <text> 就是行内元素。

<view class="red">第一个行内元素</view><view class="blue">第二个行内元素</view><view class="green">第三个行内元素</view><view class="gray">第四个行内元素</view>

.red{background-color: red;}.blue{background-color: blue;}.green{background-color: green;}.gray{background-color: gray;}view{display: inline;border: 1px solid black;}

5.3、内联块级元素

内联块级元素 (inline-block element) 同时具备块级元素和行内元素的特点，多个内联块级元素可以并列在同一行，并且高度和宽度都可以设置。例如，WXML 中的 <image> 是内联块级元素。通过设置属性 display:inline-block 能够将元素设置为内联块级元素。

<view class="red">第一个内联块级元素</view><view class="blue">第二个内联块级元素</view>

.red{background-color: red;}.blue{background-color: blue;}view{display: inline-block;height: 300rpx;width: 300rpx;border: 1px solid black;}

六、flex 布局

flex 是 Flexible Box 的缩写，意为'弹性布局'，为盒子模型提供最大的灵活性。任何一个容器都可以指定为 flex 布局。示例代码如下：

.view{display:flex;}

上述代码中将组件设置为 flex 布局后，子元素的 float、clear 和 vertical-align 属性将失效。采用 flex 布局的容器，称为 flex 容器 (flex container)。容器内部包含的子容器，称为 flex 项目 (flex item)，简称'项目'。flex 布局发生在父容器和子容器之间，父容器需要有 flex 的环境，只有设置其属性 display:flex 后，子容器才能根据自身的属性来布局。简单地说，就是如果父容器有 flex 的环境，子容器就可以瓜分父容器的空间。如果父容器没有 flex 的环境，那么子容器就无法使用 flex 的规则来使用父容器的空间。

在图中，父容器默认存在两根轴：水平的主轴 (main axis) 和垂直的交叉轴 (cross axis)。主轴的开始位置（与边框的交叉点）叫作 main start，结束位置叫作 main end；交叉轴的开始位置叫作 cross start，结束位置叫作 cross end；单个项目占据的主轴空间叫作 main size，占据的交叉轴空间叫作 cross size。项目默认沿主轴排列，默认属性为 flex-direction:row，水平轴从左向右，交叉轴为垂直方向自上而下；通过设置属性 flex-direction:column 能够将主轴与交叉轴的位置进行互换，即主轴变为垂直方向的自上而下，交叉轴变为水平方向的从左向右。在 flex 布局中，通过设置容器属性来控制内部项目的排列与对齐方式。

6.1、flex 容器属性

6.1.1、flex-direction 属性

flex-direction 属性决定主轴的方向，即 flex 弹性盒子内部项目在主轴的排列方向。其语法格式如下：

.container{flex-direction:row(默认值)row-reverse column column-reverse;}

对应的属性值如下。

• row(默认值)：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在顶端。
• column-reverse：主轴为垂直方向，起点在底端。

<view class="flex-container"><view class="item">元素 1</view><view class="item">元素 2</view><view class="item">元素 3</view></view>

.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;/* 更改 flex-direction 属性，从 row 依次替换为 row-reverse | column | column-reverse */}.item{width: 200rpx;height: 150rpx;line-height: 150rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}

6.1.2、flex-wrap 属性

flex-wrap 属性用于设置 flex 弹性盒子内部的项目是否允许项目换行以及换行时的方向，默认情况项目不换行。

其语法格式如下：

.container{flex-wrap:nowrap(默认值)|wrap wrap-reverse;}

对应的属性值如下。

• nowrap：不允许换行，当容器中所有项目的宽度超过父容器时，可能会被压缩。
• wrap：当容器中所有项目的宽度超过父容器时，允许换行排列。
• wrap-reverse：当容器中所有项目的宽度超过父容器时，换行的方向与 wrap 反向。

<view class="flex-container"><view class="item">元素 1</view><view class="item">元素 2</view><view class="item">元素 3</view><view class="item">元素 4</view></view>

.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-wrap: nowrap;}.item{width: 200rpx;height: 150rpx;line-height: 150rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}

6.1.3、justify-content 属性

justify-content 属性用于设置 flex 弹性盒子内部的项目在主轴方向上的对齐方式。其语法格式如下：

.container{justify-content:flex-start()center flex-end space-between space-around space-evenly;}

对应的属性值如下。

• flex-start：项目对齐于主轴起点，项目之间不留空隙。
• center：项目在主轴上居中排列，位于容器的中心，项目之间不留空隙。
• flex-end：项目对齐于主轴终点，项目之间不留空隙。
• space-between：项目间距相等，第一个和最后一个项目分别靠在主轴的起点和终点。
• space-around：第一个项目离主轴的起点和最后一个项目离主轴的终点的距离是中间相邻项目间距的一半。
• space-evenly：第一个项目离主轴起点以及最后一个项目离主轴的终点的距离以及中间相邻项目间距均相等。

<view class="flex-container"><view class="item">元素 1</view><view class="item">元素 2</view><view class="item">元素 3</view></view>

.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;}.item{width: 200rpx;height: 150rpx;line-height: 150rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}

6.1.4、align-items 属性

align-items 属性用于设置 flex 弹性盒子内部的项目在交叉轴方向上的对齐方式。其语法格式如下：

.container{align-items:stretch(默认) | flex-start | center| flex-end | baseline;}

对应的属性值如下。

• stretch：当项目大小未设置时项目会被拉伸至填满交叉轴。
• flex-start：项目对齐于交叉轴起点。
• center：项目在交叉轴居中对齐。
• flex-end：项目对齐于交叉轴终点。
• baseline：项目对齐于基线上，未设置基线时等同于 flex-start。

<view class="flex-container"><view class="item">元素 1</view><view class="item">元素 2</view><view class="item">元素 3</view></view>

.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;flex-wrap: nowrap;align-items: stretch;}.item{width: 200rpx;/* 当 align-items 值为 stretch 时，删掉 height 属性 *//* height: 150rpx; */line-height: 150rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}

6.1.5、align-content 属性

align-content 属性用于设置 flex 弹性盒子内部的项目进行多行排列时，在交叉轴方向上的对齐方式。其语法格式如下：

.container{align-content:stretch(默认) | flex-start | center | flex-end | space-between | space-around | space-evenly;}

对应的属性值如下。

• stretch：未设置项目大小时将项目拉伸至填满交叉轴。
• flex-start：项目在交叉轴起点对齐。
• center：项目在交叉轴居中对齐。
• flex-end：项目在交叉轴终点对齐。
• space-between：行间距相等，首行与尾行靠在交叉轴起点和交叉轴终点。
• space-around：行间距相等，首行离交叉轴起点和尾行离交叉轴终点的距离为行间距的一半。
• space-evenly：首行离交叉轴起点和尾行离交叉轴终点的距离与行间距相等。

多行排列时需要设置 flex-wrap 属性值为 wrap 允许换行。

<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view><view class="item b">元素 4</view><view class="item a">元素 5</view></view>

.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;flex-wrap: wrap;align-content: stretch;}.item{width: 200rpx;/* 当 align-items 值为 stretch 时，删掉 height 属性 */height: 100rpx;line-height: 100rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{width: 300rpx;}.b{width:350rpx;}.c{width:400rpx;}

6.2、flex 项目属性

6.2.1、order 属性

order 属性用于设置项目在主轴方向上的排列顺序，默认值为 0，容器中的项目会按照数值从小到大排列。其语法格式如下：

.item{order: <integer>;}

<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view></view>

.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;}.item{width: 200rpx;/* 当 align-items 值为 stretch 时，删掉 height 属性 */height: 100rpx;line-height: 150rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{order: 1;}.b{order: 2;}.c{order: 3;}

将容器中主轴方向设置为水平从左到右，3 个项目的 order 值分别为 1、2、3，按照从小到大的顺序依次排列。

6.2.2、flex-shrink 属性

flex-shrink 属性用于设置项目的收缩比率，当超出主轴方向上父容器的宽度，按照比例对项目进行压缩。其语法格式如下：

.item{flex-shrink:1(默认) | <number>;}

flex-shrink 的默认值为 1，如果没有定义该属性，将会自动按照默认值进行压缩。
压缩总权重的计算公式如下：

压缩总权重=长度 1×收缩因子 1+ 长度 2×收缩因子 2+...+ 长度 N×收缩因子 N

被移除流出量的计算公式如下：

被移除溢出量=原长度×溢出长度×收缩因子/压缩总权重

被压缩后的长度的计算公式如下：

被压缩后的长度=原长度 - 被移除溢出量

以水平方向为例，假设有 3 个项目 a、b、c 宽度均为 300rpx，项目的收缩因子分别为 1、2 和 3。

.a{width: 300rpx;flex-shrink: 1;}.b{width: 300rpx;flex-shrink: 2;}.c{width: 300rpx;flex-shrink: 3;}

假设父容器宽度为 600rpx，主轴水平从左向右，3 个项目的宽度均为 300rpx，会导致溢出 300rpx，现计算每个容器被压缩后的实际长度。
首先计算压缩总权重：
压缩总权重：300X1+300X2+300X3=1800rpx
然后计算每个容器被移除的溢出量：
a 被移除溢出量：300X(300X1/1800)≈50rpx
b 被移除溢出量：300X(300X2/1800)≈100rpx
c 被移除溢出量：300X(300X3/1800)≈150rpx
最后计算每个容器被压缩后的宽度：
a 被压缩后的宽度：300-50=250rpx
b 被压缩后的宽度：300-100=200rpx
c 被压缩后的宽度：300-150=150rpx
由上例可以看出：收缩因子不同，每个容器被压缩后的宽度也不相同，收缩因子数值越大，被移除溢出量越大。

<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view></view>

.flex-container{margin: 50rpx auto;width: 600rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;flex-wrap: nowrap;}.item{height: 100rpx;line-height: 100rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{width: 300rpx;flex-shrink: 1;}.b{width: 300rpx;flex-shrink: 2;}.c{width: 300rpx;flex-shrink: 3;}

6.2.3、flex-grow 属性

flex-grow 属性用于设置项目的扩张比率。当项目在主轴方向上留有剩余空间时，通过对项目按照比例扩张来覆盖剩余空间。其语法格式如下：

item{flex-grow:0(默认值) | <number>;}

flex-grow 的默认值为 0，如果没有定义该属性，项目不扩张。
扩张量的计算公式如下：

扩张量=剩余空间/（扩张因子 1+ 扩张因子 2+…+ 扩张因子 N)

被扩张后长度的计算公式如下：

被扩张后长度=原长度 + 扩张单元×扩张因子

以水平方向为例，假设有 3 个项目 a、b、c 宽度均为 200px，项目的扩张因子分别为 1、2、3。

.a{width: 300rpx;flex-grow: 1;}.b{width: 300rpx;flex-grow: 2;}.c{width: 300rpx;flex-grow: 3;}

假设父容器宽度为 600rpx，3 个项目的宽度均为 100rpx，会导致剩余空间为 300rpx，现计算每个容器被扩张后的实际长度。
首先计算扩张量：300/(1+2+3)=50rpx
然后计算每个容器的被扩张量：
a 被扩张量：50×1=50rpx
b 被扩张量：50X2=100rpx
c 被扩张量：50×3=150rpx
最后计算每个容器被扩张后的宽度：
a 被扩张后的宽度：100+50=150rpx
b 被扩张后的宽度：100+100=200rpx
c 被扩张后的宽度：100+150=250rpx
由上例可以看出：扩张因子不同，每个容器被扩张后的宽度也不相同，扩张因子数值越大，被扩张量越大。

<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view></view>

.flex-container{margin: 50rpx auto;width: 600rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;}.item{height: 100rpx;line-height: 100rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{width: 300rpx;flex-grow: 1;}.b{width: 300rpx;flex-grow: 2;}.c{width: 300rpx;flex-grow: 3;}

6.2.4、flex-basis 属性

flex-basis 属性用于代替主轴方向上项目的宽或高。
其语法格式如下：

.item{flex-basis:auto(默认) | <number> }

对应的属性值如下。

• 当容器属性设置为 flex-direction:row 或 flex-direction:row-reverse 时，如果 flexbasis 和 width 属性同时存在数值时，flex-basis 会代替 width 属性。
• 当容器属性设置为 flex-direction:column 或 flex-direction:column-reverse 时，如果 flex-basis 和 height 属性同时存在数值时，flex-basis 会代替 height 属性。
• 数值的优先级高于 auto，如果 flex-basis 属性值为 auto，当项目设置了高度或宽度时会取代 auto。

<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view></view>

.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;}.item{height: 100rpx;line-height: 100rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{width: 300rpx;flex-basis: 200rpx;}.b{width: 300rpx;}.c{width: 300rpx;}

6.2.5、align-self 属性

align-self 属性用于单独为 flex 弹性盒子内部的项目设置在交叉轴方向上的对齐方式，其属性会覆盖容器的 align-items。其语法格式如下：

.item{align-self:auto(默认)| stretch| flex-start| center| flex-end | baseline;}

对应的属性值如下。

• auto：默认项目继承父容器设置的 align-items 的属性，如果没有设置，auto 替换为 stretch。其他属性与 align-items 一致。

<view class="flex-container"><view class="item a">元素 1</view><view class="item b">元素 2</view><view class="item c">元素 3</view><view class="item d">元素 4</view></view>

.flex-container{margin: 50rpx auto;width: 740rpx;height: 600rpx;border: 1px solid #000;display: flex;flex-direction: row;}.item{width: 200rpx;line-height: 100rpx;border: 1px solid #000;text-align: center;background-color: skyblue;}.a{align-self: stretch;}.b{height:100rpx;align-self: flex-start;}.c{height: 100rpx;align-self: center;}.d{height: 100rpx;align-self: flex-end;}

七、layer 布局

7.1、绝对定位

将元素设置为绝对定位，首先设置元素的属性 position:absolute，该元素会相对于最近的一个具有定位属性的父元素作为参考，然后通过 top、bottom、left、right 属性设置上、下、左、右的偏移量完成绝对定位。如果不存在具有定位属性的父元素，该元素会以屏幕左上方的节点作为参考。

<view>使用绝对定位</view>

view{width: 300rpx;height: 500rpx;position: absolute;left: 200rpx;top: 200rpx;background-color: skyblue;border: 1px solid #000000;}

7.2、相对定位

相对定位表示子元素相对于父元素作为参考的一种定位方式，子元素设置其属性 position:absolute，父元素设置其属性 position:relative，然后通过 top、bottom、left、right 属性设置上、下、左、右的偏移量完成相对定位。

<view class="item1"><view class="item2">使用相对定位</view></view>

.item1{position: relative;width: 700rpx;height: 400rpx;border: 1px solid #000;margin-top: 150rpx;}.item2{position: relative;width: 150rpx;height: 100rpx;left: 490rpx;top: 230rpx;background-color: skyblue;border: 1px solid #000;}

7.3、固定定位

固定定位用于将元素固定在屏幕中，不会随着页面的滚动而发生位置变化，需要设置其属性 position:fixed，元素位置的定位与绝对定位的方式类似，不同之处在于元素会始终位于屏幕的某个位置。

<view class="item">使用固定定位</view>

.item{position: fixed;width: 90%;height: 130rpx;background-color: skyblue;margin-top: 1000rpx;border: 1px solid #000000;}

八、float 布局

块级元素独占一行，如果需要两个块级元素并排显示，就可以使用 float(浮动) 布局，默认情况下元素是不浮动的，通过设置属性 float:left 表示元素向着屏幕左边浮动，设置属性 float:right 表示元素向着屏幕右边浮动，浮动的条件必须是子元素的总宽度小于父容器的宽度。

<view class="left">左浮动</view><view class="left">左浮动</view><view class="left">左浮动</view><view class="right">右浮动</view><view class="right">右浮动</view><view class="right">右浮动</view>

view{width: 150rpx;height: 250rpx;border: 1px solid #ffffff;background-color: skyblue;}.left{float: left;}.right{float: right;}