盒模型是CSS的基础设计模式，定义了Web页面元素如何被作为盒子解析。在CSS中，每一个元素都是一个盒模型，包括html和body标签也是如此。

通常，CSS主要有以下几种盒模型：inline、inline-block、block、table、absolute position、float等。

每个盒模型由以下几个属性组合所决定：display、position、float、width、height、margin、padding、border等。诸多属性间也存在层次关系，并相互影响，这些因素都影响着Web浏览器对各元素的解析结果。

CSS盒模型分为两种：

• W3C标准模型。

• IE传统模型。

以上模型的相同之处是依据元素的width、height、padding和border计算实际尺寸。不同之处是计算方法不同，具体如下：

1、W3C标准盒模型。

外盒尺寸计算（空间尺寸）

• element空间高度=内容高度+内距+边框+外距

• element空间宽度=内容宽度+内距+边框+外距

内盒尺寸计算（元素大小）

• element高度=内容高度+内距+边框

• element宽度=内容宽度+内距+边框

注：内容高度：height、内容宽度：width、内距：padding、边框：border、外距：margin。

2、IE传统盒模型（IE6之前的版本）

外盒尺寸计算（空间尺寸）

• element空间高度=内容高度+外距

• element空间宽度=内容宽度+外距

内盒尺寸计算（元素大小）

• element高度=内容高度

• element宽度=内容宽度

注：内容高度height包含了元素内容高度、边框和内距。内容宽度width包含了元素内容宽度、边框和内距。

因为IE6之前的浏览器目前已基本绝迹，因此，通常使用W3C标准盒模型。但form中部分元素（例如input中的submit、reset、button、select等）仍是基于IE传统盒模型的，因此，设置这些元素的border和padding属性时，它们只会往元素盒内延伸。