第七章方框与边框课件.docVIP

第七章 方框与边框 [教学目的] 1.初步了解盒子模型的定义 2.掌握盒子模型的特性 3.掌握盒子的定位 4.了解盒子的margin叠加问题 5.掌握盒子的浮动 6.使用盒子模型进行页面布局 [教学重点] 边框的设置方法、盒子的构成、盒子的定位 [教学难点] 使用盒子模型进行页面布局 [教学课时]4课时 新知识导入：CSS的盒子模型 盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。 页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界间距组成。 网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。 CSS的盒子模型 CSS的盒子模型 每个HTML元素都可以看作是一个装了东西的盒子 盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示 默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子 元素盒子大小的计算 一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界 IE quirk模式下盒子的宽度 当将文档声明DOCTYPE删除后，IE 6对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界＋宽度＋右边界 因此当使用了盒子属性后切忌删除DOCTYPE 边框border属性 边框border则可以设置宽度、颜色和样式,分别是 border-width（宽度）; border-color（颜色）; border-style（样式）. 其中border-style属性可以将边框设置为实线（solid）、虚线（dashed）、点划线（dotted）、双线（double）等效果 使用CSS时，可以分别对4条边框设置不同的属性值。 方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下： ( 如果给出2个属性值，那么前者表示上下边框的属性，后者表示左右边框的属性。 (如果给出3个属性值，那么前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性。 (如果给出4个属性值，那么依次表示上、右、下、左边框的属性，即顺时针排序。 要把border-width、border-border-color和border-style这3个属性合在一起，还可以用border属性来简写。 例如： border: 2px green dashed 这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写更方便。 边框实例 html head style type=text/css #outerBox{ width:200px; height:100px; border:2px black solid; border-left:4px green dashed; border-color:red gray orange blue; /*上 右 下 左*/ border-right-color:purple; } /style /head body div id=outerBox /div /body 特殊样式边框 在CSS中，可以对元素的其中三条边框应用同种样式，但是单独对某一条边框设置特殊的样式，以制作特殊效果，例如： border: 2px green dashed; border-left: 1px red solid 盒子模型的应用 1. 美化表单 网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。下列代码通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。 填充padding属性 填充padding属性，也称为盒子的内边距。就是盒子边框到内容之间的距离，和表格的填充属性（cellpadding）比较相似。如果填充属性为0，则盒子的边框会紧挨着内容，这样通常不美观。 当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的 和前面介绍的边框类似，padding属性可以设置1、2、3或4个属性值，分别如下： 设置1个属性值时，表示上下左右4个padding均为该值。 设置2个属性值时，前者为上下padding的值，后者为左右padding的值。 设置3个属性值时，第1个为上paddi