第七章方框与边框剖析.doc

第七章 方框与边框 [教学目的] 1.初步了解盒子模型的定义 2.掌握盒子模型的特性 3.掌握盒子的定位 4.了解盒子的margin叠加问题 5.掌握盒子的浮动 6.使用盒子模型进行页面布局 [教学重点] 边框的设置方法、盒子的构成、盒子的定位 [教学难点] 使用盒子模型进行页面布局 [教学课时]4课时 新知识导入：CSS的盒子模型 盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。 页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界间距组成。 网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。 CSS的盒子模型 CSS的盒子模型 每个HTML元素都可以看作是一个装了东西的盒子 盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示 默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子 元素盒子大小的计算 一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界 IE quirk模式下盒子的宽度 当将文档声明DOCTYPE删除后，IE 6对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界＋宽度＋右边界 因此当使用了盒子属性后切忌删除