第3章 微信小程序页面布局

一. 盒子模型

 

 

 

盒子模型元素有 margin ，padding ，border ，width ， height

 

 

微信小程序的视图层由 WXML 和 WXSS 组成

 

 

WXSS用于描述WXML的组成样式，决定WXML的组件如何显示

 

 

 

盒子模型结构

 

 

 

 

盒子模型元素

 

 

 

 

图中元素含义：

 

 

width 和 height

内容的宽度和高度

 

 

padding - top , padding - right , padding - bottom 和 padding - left

上内边距，右内边距，底内边距和左内边距

 

 

border - top , border - right , border - bottom 和 border - left

上边框，右边框，底边框和左边框

 

 

margin - top , margin - right , margin - bottom 和 margin - left

上外边框，右外边框，底外边框和左外边框

 

 

 

 

二. 块级元素与行内元素

 

 

 

元素按显示分为块级元素，行内元素和行内块元素，它们的显示方式由 display 属性控制

 

 

 

块级元素特点：

（1）一个块级元素占一行

（2）块级元素的默认高度由内容决定，除非自定义高度

（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度

（4）块级元素的宽度、高度、外边距及内边距都可以自定义设置

（5）块级元素可以容纳块级元素和行内元素

 

 

<view/>组件默认为块级元素，使用<view/>组件演示盒子模型及块级元素代码如下：

 

 

 

 

 

 

行内元素特点：

（1）行内元素不能设置高度和宽度，其高度和宽度由内容决定

（2）行内元素内不能放置块级元素，只级容纳文本或其他行内元素

（3）同一块内，行内元素和其他行内元素显示在同一行

 

 

 

<text/>组件默认为行内元素，使用<view/>及<text/>组件演示盒子模型及行内元素的示例代码如下:

 

 

 

 

 

 

当元素的 display 属性被设置为 inline- block 时，元素被设置为行内块元素

 

 

 

行内块元素可以被设置高度、宽度、内边距和外边距

 

 

 

示例代码如下: 

 

 

 

 

 

 

 

 

三. 浮动与定位

 

 

 

 

 

1.1 元素浮动

 

 

float 属性定义浮动

 

 

基本格式：

{ float:none |left |right ; }

 

 

示例代码如下: 

 

 

 

 

 

clear 属性用于清除浮动元素对其他元素的影响

 

 

基本格式：

{ clear:left |right |both |none }

 

 

 

示例代码如下: 

 

 

 

 

 

 

1.2 元素定位

 

 

position属性可以实现对页面元素的精确定位

 

 

基本格式：
{ position:static |relative |absolute |fixed }

 

 

 

static         默认值，该元素按照标准流进行布局
relative      相对定位
absolute    绝对定位
fixed          固定定位

 

 

对 box1、box2、box3进行元素静态定位，示例代码如下:

 

<!-- 三个元素均未定位 static -->
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box3</view>

<!-- box2 元素相对定位 relative top:30px left:30px -->
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: relative;left: 30px;top: 30px">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box3</view>

<!-- box2 元素绝对定位 absolute top:30px left:30px -->
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: absolute;left: 30px;top: 30px">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box3</view>

<!-- box2 元素固定定位 fixed top:30px left:30px -->
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box1</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px;position: fixed;left: 30px;top: 30px">box2</view>
<view style="border: 1px solid #0f0;width: 100px;height: 100px">box3</view>

 

 

运行结果：

 

 

 

四. flex 布局

 

 

flex布局是万维网联盟在 2009年 提出的一种新布局方案

flex是  flexible box 的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局

flex布局主要由容器和项目组成

 

容器默认存在两根轴：水平主轴和垂直交叉轴

 

设置 display 属性可以将一个元素指定为flex布局，设置 flex- direction 属性可以指定轴方向

主轴既可以是水平方向，也可以是垂直方向

 

 

flex 布局模型

 

 

1.1 flex 容器属性有 7 种

 

1.  display

 

指定元素是否为flex布局，

 

语法格式为：

 

.box{display:flex |inline - flex;}

 

2.  flex - direction

 

设置主轴的方向，即项目排列的方向

 

 

语法格式为：

.box{flex -direction:row |row -reverse |column |column - reverse;}

 

 

row                          起点在左端

row - reverse           起点在右端

column                     起点在顶端

column - reverse      起点在底端

 

 

 

fex - direction 示例
(a) row；(b) row - revene；(e) column； (d) column - revense

 

 

3. flex - wrap

 

指定当项目在一根轴线的排列位置不够时，项目是否换行

 

 

语法格式为：

.box{flex -wrap;nowrap lwrap lwrap -reverse;}

 

 

nowrap                 不换行，默认值
wrap                     换行,第一行在上方
wrap - reverse      换行，第一行在下方

align - item            自动换行；但align-item的值不能为“stretch”

 

 

 

fex-wrap示例
(a) nownap；(b) wrap；(c) wrap - revense

 

 

 

4. flex - flow

 

默认值为rownowrap

 

 

语法格式如下：

.box{flex - flow:<flex - direction>||<flex - wrap>;}

 

.box| flex - flow;row nowrap;|                                   //水平方向不换行

.box|flex - flow:row - reverse wrap;|                         //水平方向逆方向换行

 

.box|flex - flow:column wrap - reverse;}                   //垂直方向逆方向换行

 

 

5. justify - content

 

定义项目在主轴上的对齐方式

 

 

语法格式如下：
.box{justify - content:flex - start |flex - end |center |space - between |space - around;}

 

justify - content          方向从左到右
flex - start                   左对齐

flex - end                    右对齐

center                         居中
space - between         两端对齐

space - around            每个项目两侧的间隔相等
 

 

 

justify - content 示例
(a) flex - start；(b) center；(c) flex - end；(d) space - between；(e)space - around

 

 

 

6. align - items

 

指定项目在交叉轴上的对齐方式

 

语法格式如下：
.box{align -items:flex -start |flex -end Icenter Ibaseline Istretch;}

 

 

align - items                           默认交叉由上到下

flex - start                              交叉轴起点对齐

flex - end                                交叉轴终点对齐

center                                     交叉轴中线对齐

baseline                                 项目根据它们第一行文字的基线对齐

 

stretch 未设置高度或设置为auto，项目将在交叉轴方向拉伸填充容器，此为默认值

 

 

7. align - content

 

定义项目有多根轴线的对齐方式，如果只有一根轴线，该属性不起作用

 

 

语法格式如下：
.box{align - content:flex - start |flex - end | center |space - between space - around |stretch}

 

 

space - between   与交叉轴两端对齐，轴线之间的间隔平均分布

space - around     每根轴线两侧的间隔都相等，轴线之间的间隔比轴线与边框间隔大一倍

 

其余各属性值的含义与align-items属性的含义相同

 

 

 

align - content 示例
(a)  flex - start； (b)  center； (e)  flex - end

 

 

 

 

1.2 项目属性有 6 种

 

 

 

1. order

 

定义项目的排列顺序，数值越小，排列越靠前，默认值为0

 

 

语法格式如下：

.item{order: < number >;}

 

 

 

2. flex - grow

 

定义项目的放大比例，默认值为0，即不放大

 

 

语法格式如下：
.item{flex - grow:< number >;}

 

 

 

3. flex - shrink

 

定义项目的缩小比例，默认值为1，如果空间不足，该项目将被缩小

 

 

语法格式如下：
.item{flex - shrink: < number >;}

 

 

 

 

4. flex - basis

 

定义伸缩项目的基准值，剩余的空间将按比例进行缩放，它的默认值为auto

 

 

语法格式如下：
.item{flex - basis: < number > lauto;}

 

 

 

 

5. flex

 

其默认值分别为0、1、auto

 

 

语法格式如下：

.item{flex:< flex - grow >|< flex - shrink >|< flex - basis >;}

 

 

 

 

6. align - self

 

指定单独的伸缩项目在交叉轴上的对齐方式，该属性会重写默认的对齐方式

 

 

语法格式如下：
.item {align - self:auto |flex - start |flex - end |center |baseline stretch;}

 

auto 表示继承容器align-items 的属性，如果没有父元素，则等于stretch(默认值)

 

 

 

 

 

本章总结：本章首先介绍了页面布局中最基本的盒子模型，接下来介绍了浮动和定位，最后重点讲解了flex布局的基本原理、容器和项目的相关属性