背景
上一篇文章我们已经讲述了WXSS的一部分内容，其中包括尺寸、选择器、内联样式以及全局样式和局部样式，本篇文章将会讲述WXSS布局相关内容，WXSS实现了CSS布局相关的绝大部分规范。
盒模型
盒子模型是CSS的基础，如下图所示，CSS假定每个元素都会生成一个或多个矩形框，每个元素框中心都有一个内容区（content），这个内容区周围有内边距（padding）、边框（border）和外边距（margin），这些项默认宽度为0。简单来说，HTML的每个元素就是一个盒子，在微信小程序中也是如此，元素的宽度和高度就是内容区域的高度和宽度，不包括内边距、边框和外边距，可以通过width、heigh、padding、border和margin属性控制盒子样式。
CSS中的布局都是基于盒子模型，不同类型元素对盒子模型的处理也不相同，块级元素的处理与行内元素不同，浮动元素和定位元素的处理也不相同，接下来我们逐一讨论这些差异。
块级元素
元素按显示方式主要可以分为块级元素和行内元素，元素的显示方式由display属性控制，块级元素会默认占一行，一般一行内只有一个块级元素（浮动后除外），当添加新的块级元素时，新的元素会自动换行。块级元素一般作为容器出现，用于组织结构。微信小程序中一些元素默认是块级元素，如<view/>组件，而有一些元素默认是行内元素如text组件，可以通过修改元素display为block将一个元素强行设置为块级元素，块级元素的特性如下：
- 总是在新行上开始
- 宽度默认为width + marginLeft + marginRight + paddingLeft + paddingRight刚好等于父级元素内容区的宽度，除非设定一个新宽度，需要注意的是，当设置块级元素的宽度为100%时，如果当前元素存在padding和margin会导致块级元素溢出父元素
- 盒子模型的高度默认由内容确定
- 盒子模型中高度、宽度、内边距和外边距都可以控制
- 可以容纳行内元素和其他块级元素。
<view/>组件默认是块级元素，以<view/>来说明块级元素特性，代码如下：
<!--pages/test/test.wxml-->
<!-- 每个块级元素占领一行 -->
<view style="border: solid 1px;">第一个块级元素</view>
<!-- 默认情况下块级元素的等于父级元素内容区宽度 -->
<view style="border: solid 10px #f00; 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>
最后结果如下：
行内元素
除了块级元素，最常见的就是行内元素，通过设置display属性为inline可以将一个元素设置为行内元素，其特点总结如下：
- 和其他非块级元素都在一行上
- 盒子模型中高度、宽度、上下margin和上下padding设置都无效，只能设置左右margin和左右padding
- 宽度就是文字或图片的宽度，不可改变
- 行内元素宽度、高度都不能直接设置。
- 行内元素只能容纳文本或其他行内元素，在行内元素中放置块级元素会引起不必要的混乱
行内块元素
行内块元素是块级元素和行内元素的混合物，当display被设置成inline-block时，元素就被设置为行内块元素，行内块元素可以设置宽、高、内边距和外边距，可以简单理解为将块级元素在一行展示。例子如下：
<view style="border: solid 1px; display: inline-block; margin: 5px">北冥有鱼</view>
<view style="border: solid 1px; display: inline-block; margin: 5px">其名为鲲</view>
<view style="border: solid 1px; display: inline-block; margin: 5px">鲲之大</view>
<view style="border: solid 1px; display: inline-block; margin: 5px">不知其几千里也</view>
<view style="border: solid 1px; display: inline-block; margin: 5px">化而为鸟</view>
<view style="border: solid 1px; display: inline-block; margin: 5px">其名为鹏</view>
<view style="border: solid 1px; display: inline-block; margin: 5px">鹏之背</view>
<view style="border: solid 1px; display: inline-block; margin: 5px">不知其几千里也</view>
最后结果如下：
浮动和定位
盒子模型规定了元素自身相关的一些属性，但是在实际页面当中包含有多个元素，元素与元素的相对关系就是定位，定位允许定义元素框相对于父元素、其他元素甚至是浏览窗口本身的位置，而浮动与定位则是常用的布局方案。
浮动
浮动不完全是定位，同时也是正常的流布局，通过设置float属性，浮动框可以向左或者向右移动，直到其边缘碰到包含框或者另一个浮动框为止。由于浮动框不在文档的普通流中，文档中的普通流中会表现的浮动框不存在一样，其他内容会绕过去。
<!--pages/test/test.wxml-->
<!-- 每个块级元素占领一行 -->
<view >北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。鹏之背，不知其几千里也；怒而飞，其翼若垂天之云。<view style="display: block; float: left; border: solid 1px; margin: 20px;">逍遥游</view>是鸟也，海运则将徙于南冥。南冥者，天池也。《齐谐》者，志怪者也。《谐》之言曰：“鹏之徙于南冥也，水击三千里，抟扶摇而上者九万里，去以六月息者也。</view>
效果如下：
上例说明了浮动框在文档中的情况，在一般情况中，由于元素浮动不在普通流当中，这会导致父级元素忽略浮动元素的高度形成坍塌，如下例所示：
<view style="border: solid 1px;">
<view >北冥有鱼，其名为鲲。鲲之大，不知其几千里也；化而为鸟，其名为鹏。</view>
<view style="float: left;">逍遥游</view>
</view>
上述例子中父级元素的边框并没有囊括浮动框，这是浮动的一个特性，有时候我们使用浮动框希望父元素可以囊括浮动框，这就需要使用到clear属性，当设置clear时可以确保当前元素的左右边或左右两边同时不能出现浮动的元素。
<view style="border: solid 1px;">
<view >其他元素</view>
<view style="float: left;">浮动框</view>
<view style="clear: left;">清除浮动框</view>
</view>
<view style="border: solid 1px; margin-top: 30rpx;">
<view >其他元素</view>
<view style="float: left;">浮动框</view>
<view >不清除浮动框</view>
</view>
上述例子有一个很有意思的现象，虽然父级元素会忽略浮动元素但是不会忽略其他元素（包括清除浮动的元素），而清除浮动的元素在浮动元素的下方，所以视觉上就是父元素将所有元素都囊括进来，利用这个特性，如果把上述清除浮动的元素高度设为0，这时父元素仍然会囊括浮动元素，从而防止浮动元素的父元素高度坍塌。
定位
元素的定位由position属性控制，position有四种不同类型的定位，会影响元素框的生成。
- static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素会创建一个或多个行框，置于其父元素中，static是position默认值。
- relative：元素框偏离某个距离。元素仍保持未定位前的形状，它原本所占的空间仍保留。
- absolute：元素框从文档流中完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者初始包含块。对于absolute来说，包含块是离当前元素最近的position为absolute或relative的父元素，如果父元素中没有任何absolute或relative布局的元素，那么包含块就是根元素。
- fixed：元素框表现类似于postion设置为absolute，不过包含块是视窗本身。
下面以例子来说明
<view style="border: solid 1px;">
北冥有鱼，其名为鲲。鲲之大，<view style="position: relative; top: 10px; left: 10px;">Relative</view>不知其几千里也；化而为鸟，其名为鹏。
</view>
<view style="border: solid 1px; margin-top: 30rpx; position: relative;">
北冥有鱼，其名为鲲。鲲之大，<view style="position: absolute; top: 10px; left: 10px;">absolute</view>不知其几千里也；化而为鸟，其名为鹏。
</view>
<view style="position: absolute; top: 400px; left: 10px;">不含包含块absolute</view>
<view style="position: fixed; right: 10px; bottom:30px;">fixed</view>
结果如下
最后
有兴趣可以关注公众号QStack，由定期分享一些文章和免费的学习资源。
