1996年W3C推出CSS，并规定了页面中所有元素基本显示形态为方形的盒子（Box），并由此形成了一套严谨的盒子模型（Box Model）。根据这个盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示属性，这就是经典的CSS盒模型。盒模型是CSS基础，它规定了网页元素显示方式，以及如何控制元素间的位置关系。
CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，它包含边界、边框、补白、内容，内容又包括填充对象和背景（背景色和背景图像）。盒模型规范了网页元素的显示基础，关系到网页设计中排版、布局、定位等操作，任何一个元素都必须遵循盒模型规则。
认识盒模型
传统网页设计是以表格为基础的，所有网页元素都依靠表格来确定自己的外框和位置。但表格布局也给网页带来很多问题。例如，在表格页面中，为了给一段文本加上一个彩色的边框，需要添加一个表格，然后为表格定义边框，通过这种间接的方式为文本增加一个边框。现在想一想，这似乎有点不可思议，但传统布局中这种应用确实很普遍，因此一个网页中可能需要添加很多个类似的无意义的表格。
CSS完全抛弃了表格的束缚，明确规定了网页中所有元素都可以定义自己的模型。除了边框外，在元素内容四周还可以定义一个空白区域以控制元素边框与元素内容之间的位置关系，以及在边框外边定义一个空白区域以控制元素与其他元素的距离。
在元素内容与边框之间的空白区域，被称作元素的补白（padding），有人也称之为元素的内边距、填充或内框；在元素边框外边的空白区域，被称作边界（margin），有人也称之为元素的外边距或外框。
由于每个元素都可以拥有自己的模型，它看起来像一个矩形的盒子，于是有人就把CSS的这种规则统称为盒模型。
盒模型概念的提出，使网页布局完全摆脱了表格的束缚，任何元素对象，无论是传统的段落、列表、标题、图片，还是标准布局中的div和span新贵元素，都可以通过自己的属性来实现布局，设置模型显示效果。
CSS3规范新增加了UI模块（User-interface样式模块），该模块用来控制与用户界面相关效果的呈现方式，详细资料请参阅http://www.w3.org/TR/css3-ui/。该模块改善了传统盒模型结构，增强盒子构成要素的功能，扩展了盒模型显示的方式。具体描述如下：
- 改善结构：除了传统的内容区、边框区、补白区和边界区外，为盒子新增轮廓区。
- 增强功能：内容区增强CSS自动添加内容功能，增强内容溢出、换行处理；允许多重定义背景图、控制背景图显示方式等；增加背景图边框，多重边框，圆角边框等功能；完善margin:auto;布局特性。
- 扩展显示：完善传统的块显示特性，增加弹性、伸缩盒显示功能，丰富网页布局手段。
盒模型结构
在网页设计中，经常会听到：内容（content）、补白（padding）、边框（border）、边界（margin）， CSS盒模式都具备这些属性。用户可以把它转移到日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫盒子模型。盒模型具有如下特点，结构示意如图1所示。
- 每个盒子都有：边界、边框、补白、内容四个属性。
- 每个属性都包括四个部分：上、右、下、左。
- 每个属性可同时设置，也可分别设置。
- 边界和补白只能够定义大小，而边框可以定义样式、大小和颜色。
- 内容可以定义宽度和高度。
图1 盒模型结构示例图
【示例】CSS盒模型是网页设计的基础，下面示例在文档中插入一个div元素，它遵循盒模型规则，定义div元素的margin、background-color、background-image、padding 、border属性和文本显示内容。在Dreamweaver编辑窗口中选中后的预览效果，如图2所示，可以看到Dreamweaver能够可视化模拟出盒模型结构，用户能够很清楚的看出盒模型中各个属性的效果。
图2 盒模型结构
<style type="text/css">
#box {
height:400px; /*定义元素的高*/
width:400px; /*定义元素的宽*/
margin:60px; /*定义元素的边界*/
padding:60px; /*定义元素的补白*/
border:solid 60px #aaa; /*定义元素的边框*/
background-image:url(images/box1.jpg); /*定义元素的背景图像*/
background-repeat:no-repeat;
background-color:#CC99CC; /*定义元素的背景颜色*/}
</style>
<div id="box">盒模型结构示意图</div>
CSS规定页面中所有元素都包括四个区域：内容区、补白区、边框区和边界区。利用CSS属性，可以给元素的四个区域设置大小。在默认状态下，所有元素盒模型的初始状态：margin、border、padding、width和height都显示为0，背景为透明。当元素包含内容后，width和height会自动调整为内容的宽度和高度，而当元素浮动时，情况就非常复杂。
在CSS中，可以增加补白、边框和边界的区域大小，这些不会影响内容区域（宽和高），但会增加元素框的总尺寸。