如果CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框（element box），那么我们可以形象地将其看作是一个盒子。CSS围绕这些盒子产生了一种“盒子模型”概念，通过定义一系列与盒子相关的属性（内容、填充、边框、边界），可以控制各个盒子乃至整个HTML文档的表现效果和布局结构。

虽然CSS中没有盒子这个单独的属性对象，但它却是CSS中无处不在的一个重要组成部分。

CSS盒子模型的应用

首先，一些HTML元素如div、p等块元素，默认情况下就是一个盒子，有些内联元素如span、a等虽然默认不是盒子，但也可以通过CSS中的display属性将其声明成盒子，在HTML文档中，不是盒子的元素各自的宽度为其所呈现的信息内容宽度，它们彼此间互相紧靠从左到右依次排列，直到占满整个浏览器窗口后自动换行。对于是盒子的元素，如果没有特殊设置，其默认总是占单独一行，宽度为浏览器窗口的宽度，在其前后的元素不管是不是盒子只能排列在它的上面或者下面，即上下累加着进行排列。每个盒子都可以看成是由从内到外的四个部分构成，即内容、填充、边框和边界，CSS为这四个部分规定了相关的属性，通过对这些属性的控制可以丰富盒子的实际表现效果。下面简要的介绍这四个组成部分及各自具备的属性：

1.内容是盒子模型的中心，它呈现了盒子的主要信息，这些信息可以是文本、图片等多种类型。内容是盒子模型必备的组成部分，其他的三部分都是可选的。内容有三个属性，width、height和overflow。使用width和height属性可以指定盒子内容的高度和宽度，其值可以是长度计量值或者百分比值。当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。属性值为hidden时，溢出部分将不可见；为visible时，溢出的内容信息可见，只是被呈现在盒子的外部；当为scroll时，滚动条将被自动添加到盒子中，用户可以滚动显示内容信息；当为auto时，将由浏览器决定如何处理溢出部分。

2.填充是内容和边框之间的空间，可以被看作是内容的背景区域。填充的属性有五种，即padding、padding-top、padding-bottom、padding-left、padding-right。使用这五种属性可以指定内容与各方向边框间的距离，对应的属性值类型与width和height相同。同时通过对盒子背景色属性的设置可以使填充部分呈现相应的颜色。

3.边框是内容和填充的边界。边框的属性有border、border-style、border-width和border-color。边框样式属性border-style是边框最重要的属性，根据CSS规范，如果没有指定边框样式，其他的边框属性都会被忽略，边框将不存在。CSS规定了dotted、doshed、solid等九种边框样式。使用边框宽度属性border-width可以为边框指定具体的厚度，其属性值可以是长度计量值，也可以是CSS规定的thin、medium和thick。使用border-color属性可以为边框指定相应的颜色，其属性值可以是RGB值，也可以是CSS规定的颜色名。

4.边界位于盒子的最外围，它不是一条边线而是添加在边框外面的空间。边界使元素盒子之间不必紧凑地连接在一起，是CSS布局的一个重要手段。边界的属性有五种，即margin、margin-top、margin-bottom、margin- left、margin-right，其具体的设置和使用与填充属性类似。对于两个邻近的都设置有边界值的盒子，他们邻近部分的边界将不是二者边界的相加，而是二者的重叠，若二者邻近的边界值大小不等，则取二者中较大的值。同时，CSS容许给边界属性指定负数值，当指定负边界值时，整个盒子将向指定负值方向的相反方向移动，以此可以产生盒子的重叠效果。采用指定边界正负值的方法可以移动网页中的元素，这是CSS布局技术中的一个重要方法。

CSS盒子模型不仅增强了HTML文档的表现效果。同时它不同于以往表格布局的网页，通过由CSS定义的大小不一的盒子和盒子嵌套来编排网页，用这种方式排版的网页代码简洁，更新方便，能兼容更多的浏览器。