一希堕神话中有一个Pandora'sBox潘多拉的盒子的传说，说是多拉从天上来到人间，同时也带来了一个盒子，，出于好奇她打开盒子想看个究竟，结果饥荒疾病、、贪婪、嫉妒、悲惨等邪恶一齐从盒子里跑了出来，从此也就开始了人类的灾难。
1996年，W3C推出了CSS，同时也带来了一个盒子，盒子的名字叫BBox Model（中文译为盒模型），根据这个盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示属性，这就是经典的CSS盒模型。盒模型给网页设计带来了创意和激情，但如潘多拉的盒子一样，也让初学者和不少网页设计师为之愁眉和烦恼。
盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间涧相互关系。本节将围绕盒模型的缘起、概念、、结构、上尺寸等基础知识展开研究，以便为后面的学习和日后网页设计奠定扎实的基础。
什么是盒模型？
CSS定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、容区域、背景包括背景色和背景图像，是盒模型。盒模型如同工厂模具一样，它规范了网页元素的显示基础。盒模型关系到网页设计中排版、布局、定位等操作，任何一个元素都必须遵循盒模型则，如div, span, hl-h6,p.strong等。
为什么提出盒模型？天津网站建设，天津网站优化，汽车玻璃，商业策划招商，钢板桩租赁，天津废锡回收，天津网站制作
传统网页设计是以表格为基础的，所有网页元都依靠表格来确定自己的外框和位置。表格似乎很神奇，这是因为表格可以生成边框，可以定位网页元素，还可以为整个页面建立复杂的结构。但表格布局也给网页带来很深的毒害。试想一下，在传统表格布局中，为了给一段文本加上一个彩色的边框，需要添加一个表格，然后为表格定义边框，通过这种间接的方式为文本增一个边框。现在想一想，这似乎有点不可思议，但在传统布局中这种应用确实很普遍，因此一个网页中可需要添加很多个类似的无意义的表格。
CSS完全摆脱了表格的束缚，明确规定了网页中所有元素都可以定义自己的模型。除了边框外，在元素内容四周还可以定义一个空白区域以控制元素边框与元素内容之间的的位置关系，以及在边框外边定义一个空白区域以控制元素与其他元素之间的距离。医用灭菌袋 灭菌袋封口机 硅橡胶印模材 齿科针
在元素内容与边框之间的空白区域，被称做元素的补白(padding)，有人也称之为元素的内边距、填充或内框；在元素边框外边的空白区域，被称做边界(margin)，有人也称之为元素的外边距或外框。
由于每个元素都可以拥有自己的模型，它看起来像一个矩形的盒子，于是有人就把CSS的这种规则统称为盒模型。
盒模型概念的提出，使网页布局完全摆脱了表格的束缚。任何元素对象，无论是传统的段落、列表、标题、图片，还是标准布局中的div和span新贵元素，都可以通过自己的属性来实现布局，设置模型显示效果。
在CSS中，所有网页元素都被看作一个矩形框，或者称为元素框。这个模型框描述了元素在网页布局中所占的空间和位置。
CSS盒模型是我们进行网页布局的基础，如右图就就是一个div元素对象，它遵循background-color, background-image,padding、border属性和文本显示内容，这是在Dreamweaver 8编辑窗口中被选中后的预览效果，Drcamweavcr 8能够可视化 舅模拟出盒模型的效果。通过右图我们能够很清楚地看出盒模型中各个属性的实际显示效果。其中CSS布局代码如下：
／。[定义盒模型，参考示例4-l.html]*／
#box {
height:160px；／定义元素的高／
width:260px； ／定义元素的宽／
margin:60px； ／定义元素的边界／
padding:60px； ／定义元素的补白／
border:solid 60px #aaa； ／定义元素的边框／
background-image:url(box.jpg); ／定义元素的背景图像／
backgr.ground-c-color:#CC99CC； ／定义元素的背景颜色／}
所有网页元素都可以包括四个区域：内容区、补白区、边框区和边界区。在CSS中，可以增加补白、边框和边界的区域大小，这些不会影响内容区域，即元素的宽和高，但会增加元素框的总尺寸。整个文档都是由大量分布的方框组成。同时，在一定约束条件下，这些框会占用尽可能少的空间，而且保留足够的空间以区分内容属于哪个元素。
利用CSS属性，可以给元素的四个盒模型区域设置值，这些值 ！是附加的。我们可以用右图显示 1的属性为不同边单独定义，也可 ！以使用margin~ border和padding !属性统一设置4个边的值。当然，也可以不为某个单独属性设置值，或者全部不设置值，元素布局也会随之发生变化。在默认状态下，所有元素盒模型的初始状态：margin、border、padding, width和height都显示为0，背景为透明。在默认布局下，当元素包含内容后，width和height会自动调整为内容的宽度和高度；而当元素浮动时，情况就非常复杂。