希腊神话中有一个Pandora's Box（潘多拉的盒子）的传说，说是潘多拉从天上来到人间，同时也带来了一个盒子，出于好奇她打开盒子想看个究竟，结果饥荒、疾病、贪婪、嫉妒、悲惨等邪恶一齐从盒子里跑了出来，从此也就开始了人类的灾难。1996年，W3C推出了CSS，同时也带来了一个盒子，盒子的名字叫Box Model 中文译为盒模型），根据这个盒模型规则，网页中所有元素对象都被放在一个盒子里，设计师可以通过CSS来控制这个盒子的显示属性，这就是经典的CSS盒模型。盒模型给网页设计带来了创意和激情，但如潘多拉的盒子一样，它也让初学者和不少网页设计师为之愁眉和烦恼。盖模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。天津网站制作和天津网站建设将围绕盒模型的缘起、概念、结构、尺寸等基础知识展开研究，以便为后面的学习和日后网页设计奠定扎实的基础。
css定义所有的元素都可以拥有像盒子一样的外形和平面空间，即都包含边界、边框、补白、内容区区域、背景c包括背景色和背景图像，这就是盒模型。盒模型如同工厂模具一样，它规范了网页元素的显示基础。盒模型关系到网页设计中排版、布局、定位等操作，任何一个元素都必须循盒模型规则，如div、span、hl~h6、p，strong等。
传统网页设计是以表格为基础的，所有网页元素都依靠表格来确定自己的外框和位置。表格乎很神奇，这是因为表格可以生成边框，可以定位网页元素，还可以为整个页面建立复杂的结构。但表格布局也给网页带来很深的毒害。试想一下，在传统表格布局中，为了给一段文本加上一个彩色的边框，需要添加一个表格，然后为表格定义边框，通过这种间接的方式为文本增加一个边框。现在想一想，这似乎有点不可思议，但在传统布局中这种应用确实很普遍，因此一个网页中可皂需要添加很多个类似的无意义的表格，CSS完全摆摆脱了表格的束缚，明确规定了网页中所有元素都可以定义自己的模型。除了边框外，在元素内容四周还可以定义一个空白区域以控制元素边框与元素内容之间的位置关系，以及在边框外边定义一个空白区域以控制元素与其他元素之间的距离。元素内容与边框之间的空白区域，被称做元素的补白(padding，有人也称之为元素的内距、填充或内框；在元素边框外边的空白区域，被称做边界（margin），有人也称之为元素的外边距或外框。
由于每个元素都可以拥有自己的模型，它看起来像一个矩形的盒子，于是有人就把CSS的这种规则统称为盒模型。盒模型概念的提出，使网页布局完全摆脫了表格的束缚。任何元素对象，无论是传统的段落、列表、标题、图片，还是标准布局中的div和span新贵元素，都可以通过自己的属性来实现布局，设置模型显显示效果。