跳到主要内容 微信小程序样式与布局详解 | 极客日志
HTML / CSS WeChat 大前端
微信小程序样式与布局详解 本文详细讲解了微信小程序（WXSS）的样式定义与布局方法。内容包括样式定义与使用方式、基础与复合选择器、文本与字体样式、盒子模型属性（宽高、内外边距、边框）、页面元素分类（块级、行内、内联块级）。重点阐述了 Flex 弹性布局的容器与项目属性，以及绝对、相对、固定定位和浮动布局的实现原理与代码示例。
一、小程序样式
1.1、定义样式
WXSS 具有 CSS 的大部分特性，其书写规则由两部分组成：选择和声明。
选择器 (selector) ：表明该样式将作用于哪些对象，这些对象可以是某个标签、指定的 class 或 id 值等。在解析这个样式时，根据选择器来渲染对象的显示效果。属性 (property) ：样式的选择项。
自定义文字的字体为 12px，颜色为红色，示例代码如下：
text {font-size : 12px ;color
#f00
1.2、使用样式 内联样式：
<view style ="width:150rpx;height:150rpx" > 我是 view 容器</view >
上述代码中通过 style 对 <view> 组件设置属性，宽度和高度均设置为 150rpx。
自动引用 样式导入 假设有一个公共样式 common.wxss，示例代码如下：
.bg-gray {background-color : gray;}
在其他的页面中都可以通过 @import 语句引入外部文件样式表，示例代码如下：
@import "common.wxss"
.bg-blue{background-color : blue;}
通过导入外部样式，.bg-gray 和 .bg-blue 样式均可以被当前页面使用。
二、选择器 选择器 (selector) 是标签与样式的纽带，在 WXSS 文件中常用的选择器有基础选择器和复合选择器。
2.1、基础选择器 标签选择器：
选择器的名称自定义，名称应当醒目且具有意义，页面中一旦设置了类别选择器，页面中该标签都具有相同的样式。示例代码如下。
<text class ="title" > 这是一行文字</text > <text class ="title" > 这是一行文字</text > <text class ="title" > 这是一行文字</text >
选择器的名称自定义，名称应当醒目且有意义。示例代码如下。
<text id ="p-style" > 这是一行文字</text > <text > 这是一行文字</text >
2.2、复合选择器 多元素选择器：
<view > 我是 view 组件</view > <text > 我是 text 组件</text >
view, text {background-color : red;}
后代元素选择器：
选择器 1 选择器 2 选择器 3 {属性：属性值，}
<view > <image > 存放图片</image > </view >
view image {width : 50 rpx;height : 100 rpx;}
其中，view image 为后代元素选择器，设置 <view> 标签嵌套中的 <image> 图片大小，宽度为 50rpx，高度为 100rpx，后代元素选择器用于对特定元素进行设置。
三、基础样式
3.1、文本样式 文本样式决定页面中文字的排版，可以设置字符缩进、文字颜色、字符间距、文本对齐方式和装饰文字等，常用属性如表所示。
属性 说明 color设置文本的颜色 letter-spacing设置字符间距 line-height设置行高 text-align规定文本的水平对齐方式 text-decoration规定添加到文本的装饰效果 text-indent规定文本块首行的缩进 text-transform控制文本的大小写 vertical-align设置元素的垂直对齐方式 white-space设置如何给元素控件留白 word-spacing设置单词间距 text-align-last当 text-align 设置为 justify 时，最后一行的对齐方式 text-justify当 text-align 设置为 justify 时，指定分散对齐的方式 text-outline设置文字的轮廓 text-overflow指定文本溢出包含的元素，应该发生什么 text-shadow为文本添加阴影 text-wrap指定文本换行规则 word-break指定文字的断行规则 word-wrap是否对过长的单词进行换行
<view class ="content" > 对段落首行缩进、文字颜色、字符间距、行高、水平对齐方式和装饰效果进行设置。</view >
.content {text-indent : 2em ;color : #00f ;letter-spacing : 20 rpx;line-height : 60 rpx;text-align : left;text-decoration : underline;}
3.2、字体样式 属性 说明 font复合属性，设置字体相关属性 font-family规定文本的字体系列 font-size规定文本的字体尺寸 font-style规定文本的字体样式 font-variant规定文本的字体大小写 font-weight规定字体的粗细
text {font-family :"Microsoft YaHei" ;font-size : 50 rpx;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 原则
padding-top :1 rpx;padding-right :2 rpx;padding-bottom :3 rpx;padding-left :4 rpx;
上述代码遵循了 TRBL 原则，按照上、右、下、左的顺序顺时针的方向将代码合并成一行，其效果等同于下方代码：
padding :1 rpx 2 rpx 3 rpx 4 rpx;
上、下、左、右的属性值相同时，简化为 1 个值。
padding :1 rpx 1 rpx 1 rpx 1 rpx; padding :1 rpx;
上、下和左、右的属性值分别相同时，简化为 2 个值。
padding :1 rpx 2 rpx 1 rpx 2 rpx; padding :1 rpx 2 rpx;
左、右的属性值相同时，简化为 3 个值。
padding :1 rpx 2 rpx 3 rpx 2 rpx; padding :1 rpx 2 rpx 3 rpx;
4.2、盒子模型属性 盒子模型使用 width 和 height 定义内容区域的大小。除此之外还可以通过 max-height、min-height 设置最大高度和最小高度，属性如表所示。
属性 说明 height设置元素的高度 max-height设置元素的最大高度 max-width设置元素的最大宽度 min-height设置元素的最小高度 min-width设置元素的最小宽度 width设置元素的宽度
padding 指内边距，即内容与边框之间的部分。内边距的属性有 4 种，分别为 padding-top、padding-right、padding-bottom 和 padding-left，其属性值可以是像素，也可以是百分比，通过设置内边距可以控制内容与边框的间隔。
margin 指外边距，主要用于设置元素之间的距离。外边距的属性有 4 种，分别为 margin-top、margin-right、margin-bottom、margin-left，其使用方法与内边距类似。padding 与 margin 的属性如表所示。
属性 说明 padding在一个声明中设置所有内边距属性 padding-top设置元素的上内边距 padding-right设置元素的右内边距 padding-bottom设置元素的下内边距 padding-left设置元素的左内边距 margin在一个声明中设置所有外边距属性 margin-top设置元素的上外边距 margin-right设置元素的右外边距 margin-bottom设置元素的下外边距 margin-left设置元素的左外边距
边框是内容与外部填充的边界，使用边框属性可以设置边框的样式，常见属性如表所示。
属性 说明 border在一个声明中设置所有的边框属性 border-color设置四条边框的颜色 border-style设置元素四条边框的样式 border-width设置四条边框的宽度 border-radius设置四条边框的边角形状 outline在一个声明中设置所有的轮廓属性
五、元素类别 小程序页面布局是指页面元素在页面中的显示位置，而页面元素与其他页面元素之间的位置关系会决定该页面元素在页面中的显示位置。所以在学习小程序的页面布局之前，开发者需要掌握页面元素的分类。根据展示特点的不同，页面元素分为块级元素、行内元素、内联块级元素 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 : 200 rpx;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 : 300 rpx;width : 300 rpx;border : 1px solid black;}
六、flex 布局 flex 是 Flexible Box 的缩写，意为'弹性布局'，为盒子模型提供最大的灵活性。任何一个容器都可以指定为 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 布局中，通过设置容器属性来控制内部项目的排列与对齐方式。
属性 说明 默认值 其它属性值 flex-direction项目的排列方向 row row-reverse column column-reverse flex-wrap项目是否换行 nowrap wrap wrap-reverse justify-content设置项目在主轴方向上的对齐方式 flex-start flex-end center space-between space-around space-evenly align-items设置项目在交叉轴方向上的对齐方式 stretch center flex-end baseline flex-start align-content当多行排列时，设置行项目在交叉轴方向上的对齐方式 stretch flex-start center flex-end space-between space-around space-evenly order设置项目在主轴上的排列顺序 0 integer flex-shrink设置项目在主轴上溢出的收缩比率 1 number flex-grow扩张在主轴方向上还有空间的项目 0 number flex-basis代替项目宽/高的属性 auto length align-self设置项目在交叉轴上的对齐方式 auto flex-start center flex-end baseline stretch
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 : 50 rpx auto;width : 740 rpx;height : 600 rpx;border : 1px solid #000 ;display : flex;flex-direction : row;}.item {width : 200 rpx;height : 150 rpx;line-height : 150 rpx;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 : 50 rpx auto;width : 740 rpx;height : 600 rpx;border : 1px solid #000 ;display : flex;flex-wrap : nowrap;}.item {width : 200 rpx;height : 150 rpx;line-height : 150 rpx;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 : 50 rpx auto;width : 740 rpx;height : 600 rpx;border : 1px solid #000 ;display : flex;flex-direction : row;flex-wrap : wrap;justify-content : flex-start;}.item {width : 200 rpx;height : 150 rpx;line-height : 150 rpx;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 : 50 rpx auto;width : 740 rpx;height : 600 rpx;border : 1px solid #000 ;display : flex;flex-direction : row;flex-wrap : nowrap;align-items : stretch;}.item {width : 200 rpx;line-height : 150 rpx;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 : 50 rpx auto;width : 740 rpx;height : 600 rpx;border : 1px solid #000 ;display : flex;flex-direction : row;flex-wrap : wrap;align-content : stretch;}.item {width : 200 rpx;height : 100 rpx;line-height : 100 rpx;border : 1px solid #000 ;text-align : center;background-color : skyblue;}.a {width : 300 rpx;}.b {width :350 rpx;}.c {width :400 rpx;}
6.2、flex 项目属性
6.2.1、order 属性 order 属性用于设置项目在主轴方向上的排列顺序，默认值为 0，容器中的项目会按照数值从小到大排列。其语法格式如下：
<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 : 50 rpx auto;width : 740 rpx;height : 600 rpx;border : 1px solid #000 ;display : flex;flex-direction : row;}.item {width : 200 rpx;height : 100 rpx;line-height : 150 rpx;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 : 300 rpx;flex-shrink : 1 ;}.b {width : 300 rpx;flex-shrink : 2 ;}.c {width : 300 rpx;flex-shrink : 3 ;}
假设父容器宽度为 600rpx，主轴水平从左向右，3 个项目的宽度均为 300rpx，会导致溢出 300rpx，现计算每个容器被压缩后的实际长度。
<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 : 50 rpx auto;width : 600 rpx;height : 600 rpx;border : 1px solid #000 ;display : flex;flex-direction : row;flex-wrap : nowrap;}.item {height : 100 rpx;line-height : 100 rpx;border : 1px solid #000 ;text-align : center;background-color : skyblue;}.a {width : 300 rpx;flex-shrink : 1 ;}.b {width : 300 rpx;flex-shrink : 2 ;}.c {width : 300 rpx;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 : 300 rpx;flex-grow : 1 ;}.b {width : 300 rpx;flex-grow : 2 ;}.c {width : 300 rpx;flex-grow : 3 ;}
假设父容器宽度为 600rpx，3 个项目的宽度均为 100rpx，会导致剩余空间为 300rpx，现计算每个容器被扩张后的实际长度。
<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 : 50 rpx auto;width : 600 rpx;height : 600 rpx;border : 1px solid #000 ;display : flex;flex-direction : row;}.item {height : 100 rpx;line-height : 100 rpx;border : 1px solid #000 ;text-align : center;background-color : skyblue;}.a {width : 300 rpx;flex-grow : 1 ;}.b {width : 300 rpx;flex-grow : 2 ;}.c {width : 300 rpx;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 : 50 rpx auto;width : 740 rpx;height : 600 rpx;border : 1px solid #000 ;display : flex;flex-direction : row;}.item {height : 100 rpx;line-height : 100 rpx;border : 1px solid #000 ;text-align : center;background-color : skyblue;}.a {width : 300 rpx;flex-basis : 200 rpx;}.b {width : 300 rpx;}.c {width : 300 rpx;}
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 : 50 rpx auto;width : 740 rpx;height : 600 rpx;border : 1px solid #000 ;display : flex;flex-direction : row;}.item {width : 200 rpx;line-height : 100 rpx;border : 1px solid #000 ;text-align : center;background-color : skyblue;}.a {align-self : stretch;}.b {height :100 rpx;align-self : flex-start;}.c {height : 100 rpx;align-self : center;}.d {height : 100 rpx;align-self : flex-end;}
七、layer 布局
7.1、绝对定位 将元素设置为绝对定位，首先设置元素的属性 position:absolute，该元素会相对于最近的一个具有定位属性的父元素作为参考，然后通过 top、bottom、left、right 属性设置上、下、左、右的偏移量完成绝对定位。如果不存在具有定位属性的父元素，该元素会以屏幕左上方的节点作为参考。
view{width : 300 rpx;height : 500 rpx;position : absolute;left : 200 rpx;top : 200 rpx;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 : 700 rpx;height : 400 rpx;border : 1px solid #000 ;margin-top : 150 rpx;}.item2 {position : relative;width : 150 rpx;height : 100 rpx;left : 490 rpx;top : 230 rpx;background-color : skyblue;border : 1px solid #000 ;}
7.3、固定定位 固定定位用于将元素固定在屏幕中，不会随着页面的滚动而发生位置变化，需要设置其属性 position:fixed，元素位置的定位与绝对定位的方式类似，不同之处在于元素会始终位于屏幕的某个位置。
<view class ="item" > 使用固定定位</view >
.item {position : fixed;width : 90% ;height : 130 rpx;background-color : skyblue;margin-top : 1000 rpx;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 : 150 rpx;height : 250 rpx;border : 1px solid #ffffff ;background-color : skyblue;}.left {float : left;}.right {float : right;}
微信扫一扫，关注极客日志 微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
相关免费在线工具 Base64 字符串编码/解码 将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
Base64 文件转换器 将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
Markdown 转 HTML 将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML 转 Markdown 互为补充。 在线工具，Markdown 转 HTML在线工具，online
HTML 转 Markdown 将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML 转 Markdown在线工具，online
JSON 压缩 通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online
JSON美化和格式化 将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online
