微信小程序开发入门教程（八）

背景

上一篇文章我们已经讲述了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/>来说明块级元素特性，代码如下：