3.1 盒子模型

微信小程序的视图层由WXML和WXSS组成。其中，WXSS（WeiXin Style Sheets）是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，因此，本章将重点讲解CSS中的布局相关内容。

在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素。

盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中，一个独立的盒子模型由内容（content）、内边距（padding）、边框（border）和外边距（margin）4个部分组成，如图3-1所示。

图3-1 盒子模型结构

此外，对padding、border和margin可以进一步细化为上、下、左、右4个部分，在CSS中可以分别进行设置，如图3-2所示。

图3-2 盒子模型元素

图中各元素的含义如下：

■ 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上外边距、右外边距、底外边距和左外边距。

因此，一个盒子实际所占有的宽度（高度）应该由“内容”+“内边距”+“边框”+“外边距”组成。例如：

此盒子所占宽度如图3-3所示。

图3-3 盒子的宽度

CSS中的布局都基于盒子模型，不同类型的元素对盒子模型的处理不同。