3.1 基本知识

3.1.1 盒子模型

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

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

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