微信小程序开发入门之布局的学习

摘要：WXSS实现了CSS布局相关的大部分规范，但在一些细节上有差异，甚至同样的语法在小程序调试工具和微信中的表现也存在差异。本章主要讲述CSS布局相关的一些基本知识，包括经典的盒子模型、浮动定位、绝对定位以及近几年提出的Flex布局。

布局

WXSS实现了CSS布局相关的大部分规范，但在一些细节上有差异，甚至同样的语法在小程序调试工具和微信中的表现也存在差异。本章主要讲述CSS布局相关的一些基本知识，包括经典的盒子模型、浮动定位、绝对定位以及近几年提出的Flex布局。这些基本知识在WXSS也是通用的。对于其他一些特性，开发者可在开发过程中尝试，如果大家想对CSS有更深的了解可以参考网络资料或《CSS权威指南》。这里再次提醒大家，在代码编写过程中一定要开启开发者工具中的这个功能：“开启上传代码时样式文件自动补全”，否则在学习本章Flex布局时会存在不同终端兼容性问题。

1　基本知识

1.1　盒子模型

盒子模型是CSS布局的基础，CSS假定每个元素都会生成一个或多个矩形框，每个元素框中心都有一个内容区（content），这个内容区周围有内边距（padding）、边框（border）和外边距（margin），这些项默认宽度为0，这个矩形框就是常说的盒子模型，如图3-1所示。

简单来说，HTML中每一个元素就是一个盒子，同理，在小程序中每一个组件就是个盒子，元素的宽度、高度就是内容区域宽度、高度，不包含内边距、边框和外边距，我们可以通过元素width、height、padding、border、margin属性控制盒子样式。盒子模型根据浏览器具体实现可分为W3C的标准盒子模型和IE盒子模型，这两种盒子模型在宽度和高度的计算上不一致，IE盒子模型的宽度和高度是包含内边距和边框的，我们这里讲述的主要是W3C的盒子模型，WXSS完全遵守W3C盒子模型规范。

CSS中的布局都是基于盒子模型，不同类型元素对盒子模型的处理也是不同的，块级元素的处理就和行内元素不同，浮动元素和定位元素的处理也是不相同的，接下来我们逐一讨论这些差异。

1.2　块级元素

元素按显示方式主要可以分为块级元素和行内元素，元素的显示方式是由display属性控制的，块级元素会默认占一行高度，一般一行内只有一个块级元素（浮动后除外），当再添加新的块级元素时，新元素会自动换行显示。块级元素一般作为容器出现，用于组织结构。一些元素默认就是块级元素，如小程序中的组件，而一些则默认是行内元素，我们可以通过修改元素display属性为block，将一个元素强制设置为块级元素。一个块级元素的元素框与其父元素的width相同，块级元素的width + marginLeft + marginRight + paddingLeft + paddingRight刚好等于父级元素内容区宽度，显示时默认撑满父元素内容区。块级元素高度由其子元素决定，父级元素高度会随内容元素变化而变化。块级元素特点总结如下：

总是在新行上开始。

宽度默认为width + marginLeft + marginRight + paddingLeft + paddingRight刚好等于父级元素内容区宽度，除非设定一个新宽度，这里需要注意，当设置块级元素宽度为100%时，如果当前块级元素存在padding、margin会导致块级元素溢出父元素。

盒子模型高度默认由内容决定。

盒子模型中高度、宽度及外边距和内边距都可控制。

可以容纳行内元素和其他块级元素。

示例：

<view/>组件默认是块级元素，下面我们使用<view/>为大家演示块级元素的特性，如图3-2所示。

代码如下：

<!-- 每个块级元素占领一行 -->
<view style="border:solid 1px;">第一个块级元素</view>

<!-- 默认情况下块级元素的元素框和父级元素的width相同，刚好撑满内容区 -->
<view style="border:solid 10px; margin : 10px; padding :10px;">第二个块级元素
</view>

<!-- 即使宽度不足，仍会占领一行让其余元素换行 -->
<view style="border:solid 1px; width : 200px;">第三个块级元素</view>
其他信息

<!-- 父级元素高度随内容决定 内容为块级元素-->
<view style="margin-top:10px; border:solid 1px;">
    <view style="height : 100px;">块级元素</view>
</view>

<!-- 父级元素高度随内容决定 内容为文本流情况 -->
<view style="margin-top:10px; border:solid 1px;">
    文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
</view>

块级元素还有很多特性，比如水平格式化、垂直格式化等，我们不在这里一一列举，大家可以查阅相关资料。

1.3　行内元素

除了块级元素，最常见的就是行内元素了，通过设置display属性为inline可以将一个元素设置为行内元素，小程序中就是一个行内组件。行内元素没有块级元素那么简单直接，块级元素只是生成框，通常不允许其他内容与这些框并存，行内元素特点总结如下：

和其他非块级元素都在一行上。

盒子模型中高度、宽度、上下margin、上下padding设置均无效，只能设置左右margin和左右padding。

宽度就是文字或图片的宽度，不可改变。

行内元素宽度、高度都不能直接设置。

行内元素只能容纳文本或其他行内元素，在行内元素中放置块级元素会引起不必要的混乱。

如图3-3中的示例，大家可以对比本例中块级元素和行内元素的区别，我们设置了行内元素的margin，布局时上下margin都被忽略了。本例中我们将上下padding设置为0，大家可以尝试设置为其他值，这时会发现上下padding会生效，但是不会影响布局，本例中行内元素换行是因为上面的块级元素强制占位一行。

本例的代码如下：

<!-- 块级元素 -->
<view style="border:solid 1px #999; color : #999;">我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素</view>

<!-- 通过修改display属性的行内元素 -->
前面的文字<view style="border:solid 1px; margin:10px; padding : 0 10px; display: inline;">我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素</view>后面的文字

1.4　行内块元素

行内块元素是块级元素和行内元素的混合物，当display属性为inline-block时，元素就被设置为一个行内块元素，行内块元素可以设置宽、高、内边距和外边距，可以简单认为行内块元素是把块级元素以行的形式展现，保留了块级元素对宽、高、内边距、外边距的设置，它就像一张图一样放在一个文本行中，如图3-4所示。

代码如下：

<!-- 行内块元素宽度撑满父级宽度情况 -->
前面的文字<view style="border:solid 1px; margin:10px; padding : 10px; display:inline-block;">我是块级元素我是块级元素我是块级元素我是块级元素我是块级元素</view>后面的文字

<!-- 行内块元素宽度不足父级宽度情况 -->
前面的文字<view style="border:solid 1px; margin: 10px; padding : 10px; display: inline-block;">我是行内块元素</view>后面的文字后面的文字后面的文字