第七章方框与边框

第七章方框与边框[教学目的]1.初步了解盒子模型的定义2.掌握盒子模型的特性3.掌握盒子的定位4.了解盒子的margin叠加问题5.掌握盒子的浮动6.使用盒子模型进行页面布局[教学重点]边框的设置方法、盒子的构成、盒子的定位[教学难点]使用盒子模型进行页面布局[教学课时]4课时新知识导入：CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互。页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界间距组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。CSS的盒子模型CSS的盒子模型每个HTML元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子元素盒子大小的计算一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界IEquirk模式下盒子的宽度当将文档声明DOCTYPE删除后，IE6对网页的解释会进入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:2pxgreendashed这行样式表示将4条边框都设置为2像素的绿色虚线，这样就比分为3条样式来写更方便。边框实例htmlheadstyletype=text/css#outerBox{width:200px;height:100px;border:2pxblacksolid;border-left:4pxgreendashed;border-color:redgrayorangeblue;/*上右下左*/border-right-color:purple;}/style/headbodydivid=outerBox/div/body特殊样式边框在CSS中，可以对元素的其中三条边框应用同种样式，但是单独对某一条边框设置特殊的样式，以制作特殊效果，例如：border:2pxgreendashed;border-left:1pxredsolid盒子模型的应用1.美化表单网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。下列代码通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。填充padding属性填充padding属性，也称为盒子的内边距。就是盒子边框到内容之间的距离，和表格的填充属性（cellpadding）比较相似。如果填充属性为0，则盒子的边框会紧挨着内容，这样通常不美观。当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的和前面介绍的边框类似，padding属性可以设置1、2、3或4个属性值，分别如下：设置1个属性值时，表示上下左右4个padding均为该值。设置2个属性值时，前者为上下padding的值，后者为左右padding的值。设置3个属性值时，第1个为上padding的值，第2个为左右padding的值，第3个为下padding的值。设置4个属性值时，按照顺时针方向，依次为上、右、下、左padding的值。如果需要专门设置某一个方向的padding，可以使用padding-left、padding-right、padding-top或者padding-bottom来设置。设置外边距外边距（margin）指的是元素与元素之间的距离。小案例：观察普通的网页，可以发现边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器窗口的边框。这是因为body本身也是一个盒子，在默认情况下，body会有一个若干像素的margin，具体数值因各个浏览器而不尽相同。因此在body中的其他盒子就不会紧贴着浏览器窗口的边框了。为了验证这一点，可以给body这个盒子也加一个边框，代码如下。body{border:1pxblacksolid;background:#cc0;}三类margin1.行内元素之间的水平margin2.块级元素之间的竖直margin1.行内元素之间的水平margin如图所示为两个块并排的情况。2.块级元素之间的竖直margin如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图所示。这个现象称为margin的¡°塌陷¡±（或称为¡°合并¡±）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。3.嵌套盒子之间的margin当一个div块包含在另一个div块中时，便形成了典型的父子关系。这时，如果两个盒子都有边框，我们通常考虑两个盒子边框之间的距离此时，两个盒子边框之间的距离等于：外面盒子的填充值＋里面盒子的margin值其中子块的margin将以父块的内容为参考，如下图所示：子元素的实际宽度超过父height的不同处理方式当子元素的实际高度超出父元素的height的时候，IE与Firefox处理方式是不同的。IE：自动扩大父元素的高度，以容纳子元素Firefox：不扩充，因此，会子元素会溢出到父元素之外示例：子元素的实际宽度超过父height的不同处理方式图例：margin的特殊用法：取负值margin可取负值上面提及margin的时候，它的值都是正数。其实margin的值也可以设置为负数。当margin取负值的时候，可以产生意向不到的排版效果，而且有关的巧妙运用方法也非常多，在后续章节中都会陆续介绍。这里先分析margin设为负数时产生的排版效果。margin取负值的排版效果当margin设为负数时，会使被设为负数的元素向相反的方向移动，甚至覆盖在另外的元素上。示例效果图如下所示盒子模型的特性边界值margin可为负，填充padding不可为负边框border默认值为0，即不显示行内元素，如a，定义上下边界不影响行高对盒子模型的思考边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响盒子模型中只能设置两类颜色，即边框颜色和背景颜色盒子模型可设置三类距离，即边界距离margin，填充距离padding和边框值border属性值的简写形式方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。各种元素盒子属性的默认值大部分html元素的盒子属性(margin,padding)默认值都为0；有少数html元素的(margin,padding)浏览器默认值不为0，例如：body，p，ul，li，form标记等，因此我们有时有必要先设置它们的这些属性为0。Input元素的边框属性默认不为0，我们可以设置为0达到美化表单中输入框和按钮的目的。盒子的定位盒子的三种定位形式在标准流下的定位在浮动属性下的定位在定位属性下的定位除非设置浮动属性或定位属性，否则所有盒子都是在标准流中定位。顾名思义，标准流中元素盒子的位置由元素在HTML中的位置决定。标准流HTML元素在标准状况下的定位方式行内元素在同一行内横向排列块级元素占满整个一行，在页面中竖向排列元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系标准流下的盒子排列分析styletype=text/css*{border:2pxdashed#FF0066;padding:10px;margin:2px;}/stylebodydiv网页的banner（块级元素）/divahref=#行内元素1/aahref=#行内2/aahref=#行内3/adiv这是无名块p这是盒子中的盒子/p/div行内元素的盒子行内元素的盒子永远只能在浏览器中得到一行高度的空间（行高由line-height属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以块级元素显示，再设置它的盒子属性。改变行内元素的高度如图所示，当增加行内元素的边界和填充时，行内元素a占据浏览器的高度并没有增加，下面这个div块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响display属性通过display属性可控制元素是以行内元素显示还是以块级元素显示，或不显示display:block|inline|none|list-itemblock元素block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非用width设定一个宽度div,p,h1,form,ul和li是块元素的例子。inline元素inline元素的特点是：和其他元素都在一行上高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。span,a,label,input,img,strong和em是inline元素的例子列表项元素display:list-item在html中只有li元素默认是此类型，将元素设置为列表项元素后将按列表元素显示，再通过设置列表选项可使元素的左边出现小黑点。隐藏元素display:none;当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。像title元素默认就是此类型。比较visibility:hidden;制作下拉菜单、tab面板等有时就需要用display:none把菜单或面板隐藏起来需要使用display属性切换的情况让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度;控制inline元素的高度（对导航条特别有用）；无须设定宽度即可为一个块元素设定与文字同宽的背景色标准流下定位的应用－制作竖直导航菜单#nava{font-size:14px;color:#333333;text-decoration:no