第10讲_CSS盒子模型.pptVIP

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