第4章3CSS盒子模型

1、基于基于WebWeb标准的网页设计标准的网页设计CSSCSS的盒子模型的盒子模型CSS的盒子模型的盒子模型v盒子模型是盒子模型是CSS的基石之一的基石之一，它指定元素如何显它指定元素如何显示以及示以及（在某种程度上）如何相互交互在某种程度上）如何相互交互v页面上的每个元素都被浏览器看成是一个页面上的每个元素都被浏览器看成是一个矩形的矩形的盒子盒子，这个盒子由元素的，这个盒子由元素的内容内容、填充填充、边框边框和和边边界界组成。组成。v网页就是由许多个盒子通过不同的排列方式（上网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。下排列，并列排列，嵌套排列）堆积而成。

2、CSS的盒子模型的盒子模型CSS的盒子模型的盒子模型v每个每个HTML元素都可以看作是一个装了东西的盒元素都可以看作是一个装了东西的盒子子v盒子里面的内容到盒子的边框之间的距离即盒子里面的内容到盒子的边框之间的距离即填充填充(padding),盒子本身有盒子本身有边框边框(border),而盒子边框外而盒子边框外和其它盒子之间，还有和其它盒子之间，还有边界边界(magin),如图所示如图所示v默认情况下盒子的边框是无，背景色是透明，所默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子以我们在默认情况下看不到盒子contentpadding-toppadding-bottom

3、padding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的计算元素盒子大小的计算一个元素实际宽度一个元素实际宽度=左边界左边框左填充内容宽左边界左边框左填充内容宽度右填充右边框右边界度右填充右边框右边界IE quirk模式下盒子的宽度模式下盒子的宽度v当将文档声明当将文档声明DOCTYPE删除后，删除后，IE 6对网页的解释对网页的解释会进入会进入quirk（怪异）模式，此时盒子的宽度

4、等于（怪异）模式，此时盒子的宽度等于左左边界宽度右边界边界宽度右边界v因此当使用了盒子属性后切忌删除因此当使用了盒子属性后切忌删除DOCTYPECSS盒子模型计算题盒子模型计算题v如果盒子里面嵌套有盒子，且两个盒子都有边框，那如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充值么两个盒子边框之间的距离等于外面盒子的填充值里面盒子的边界值里面盒子的边界值#box1 background-color: #ddd;margin:15px;padding:5px; #box2 color: black;background-color: #aaa;margin:

5、20px;padding: 10px 0px 10px 10px;width:100px;bodyborder:1px dotted #FF0000这是里面的盒这是里面的盒子子边框边框border属性属性v盒子模型的盒子模型的margin和和padding属性比较简单，只能设属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。置宽度值，最多分别对上、右、下、左设置宽度值。而边框而边框border则可以设置宽度、颜色和样式。则可以设置宽度、颜色和样式。 v分别是分别是border-width（宽度）、（宽度）、border-color（颜色）（颜色）和和border-style（样

6、式）其中（样式）其中border-style属性可以将属性可以将边框设置为实线（边框设置为实线（solid）、虚线（）、虚线（dashed）、点划线）、点划线（dotted）、双线（）、双线（double）等效果）等效果 边框边框border属性属性v边框边框border属性有个有趣的特点，即两条交汇的边框属性有个有趣的特点，即两条交汇的边框之间是一个斜角，我们可以通过为边框设置不同的颜之间是一个斜角，我们可以通过为边框设置不同的颜色，再利用这个斜角，制作出像三角形一样的效果色，再利用这个斜角，制作出像三角形一样的效果 内 容填充填充padding属性属性v 填充填充padding属性，也称为

7、盒子的内边距。就是盒子属性，也称为盒子的内边距。就是盒子边框到内容之间的距离，和表格的填充属性边框到内容之间的距离，和表格的填充属性（cellpadding）比较相似。如果填充属性为）比较相似。如果填充属性为0，则盒，则盒子的边框会紧挨着内容，这样通常不美观。子的边框会紧挨着内容，这样通常不美观。v 当对盒子设置了背景颜色或背景图像后，那么背景当对盒子设置了背景颜色或背景图像后，那么背景会覆盖会覆盖padding和内容组成的范围，并且默认情况下和内容组成的范围，并且默认情况下背景图像是以背景图像是以padding的左上角为基准点在盒子中平的左上角为基准点在盒子中平铺的铺的 盒子模型的特性盒子模

8、型的特性v边界值边界值margin可为负，填充可为负，填充padding不可为负不可为负v边框边框border默认值为默认值为0，即不显示，即不显示v行内元素，如行内元素，如a，定义上下边界不影响行高，定义上下边界不影响行高对盒子模型的思考对盒子模型的思考v边框是实的，我们可以看到实实在在的边框，而填充边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响和边界都是虚的，我们只能看到他们对元素的影响v盒子模型中只能设置两类颜色，即盒子模型中只能设置两类颜色，即边框颜色边框颜色和和背景颜背景颜色色v盒子模型可设置三类距离，即边界距离盒子模型可设置三类距离，即边

9、界距离margin，填充，填充距离距离padding和边框值和边框值border属性值的简写形式属性值的简写形式 v方法是按照规定的顺序，给出方法是按照规定的顺序，给出2个、个、3个或者个或者4个属个属性值，它们的含义将有所区别，具体含义如下：性值，它们的含义将有所区别，具体含义如下： 如果给出如果给出2个属性值，前者表示个属性值，前者表示上下边框上下边框的属性，的属性，后者表示后者表示左右边框左右边框的属性；的属性； 如果给出如果给出3个属性值，前者表示个属性值，前者表示上边框上边框的属性，中的属性，中间的数值表示间的数值表示左右边框左右边框的属性，后者表示的属性，后者表示下边框下边框的属性

10、；的属性； 如果给出如果给出4个属性值，依次表示个属性值，依次表示上上、右右、下下、左左边边框的属性，即顺时针排序。框的属性，即顺时针排序。各种元素盒子属性的默认值各种元素盒子属性的默认值v大部分大部分html元素的盒子属性元素的盒子属性(margin, padding)默默认值都为认值都为0；v有少数有少数html元素的元素的(margin, padding)浏览器默认浏览器默认值不为值不为0，例如：，例如：body，p，ul，li，form标记等，标记等，因此我们有时有必要先设置它们的这些属性为因此我们有时有必要先设置它们的这些属性为0。vInput元素的边框属性默认不为元素的边框属性默认

11、不为0，我们可以设置，我们可以设置为为0达到美化表单中输入框和按钮的目的。达到美化表单中输入框和按钮的目的。4.5.2 盒子模型的应用盒子模型的应用v1. 美化表单美化表单v网页中的表单控件在默认情况下背景都是灰色的，文网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。下列代码本框边框是粗线条带立体感的，不够美观。下列代码通过通过CSS改变表单的边框样式、颜色和背景颜色让文改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。本框，按钮等变得漂亮些。 用盒子美化表格用盒子美化表格v让表格的外边框为让表格的外边框为2象素象素v首先用间距制作首先用间距制作

12、1像素边框的表格，然后用像素边框的表格，然后用css为为table元素加一个元素加一个1象素宽的象素宽的borderv制作制作1象素虚线边框象素虚线边框v首先将表格的边框和间距设为首先将表格的边框和间距设为0，然后设置，然后设置table的的CSS上边框和左边框为上边框和左边框为1象素虚线，再设置象素虚线，再设置td的的css下下边框和右边框为边框和右边框为1象素虚线象素虚线盒子的定位盒子的定位盒子的三种定位形式盒子的三种定位形式v在标准流下的定位在标准流下的定位v在浮动属性下的定位在浮动属性下的定位v在定位属性下的定位在定位属性下的定位v除非设置浮动属性或定位属性，否则所有盒子都是除非设置浮

13、动属性或定位属性，否则所有盒子都是在在标准流标准流中定位。顾名思义，标准流中元素盒子的中定位。顾名思义，标准流中元素盒子的位置由元素在位置由元素在HTML中的位置决定。中的位置决定。标准流标准流vHTML元素在标准状况下的定位方式元素在标准状况下的定位方式v行内元素在同一行内横向排列行内元素在同一行内横向排列v块级元素占满整个一行，在页面中竖向排列块级元素占满整个一行，在页面中竖向排列v元素不会移动到其它地方去，对于嵌套的元素盒子也元素不会移动到其它地方去，对于嵌套的元素盒子也是嵌套的关系是嵌套的关系标准流下的盒子排列分析标准流下的盒子排列分析* border: 2px dashed #FF0

14、066;padding: 10px;margin: 2px;网页的网页的banner（块级元素）（块级元素）行内元素行内元素1行内行内2行内行内3这是无名块这是无名块这是盒子中的盒子这是盒子中的盒子行内元素的盒子行内元素的盒子v行内元素的盒子永远只能在浏览器中得到行内元素的盒子永远只能在浏览器中得到一行高度一行高度的的空间（行高由空间（行高由line-height属性决定，如果没设置该属属性决定，如果没设置该属性，则是内容的默认高度），如果给它设置上下性，则是内容的默认高度），如果给它设置上下border，margin，padding等值，导致其盒子的高度等值，导致其盒子的高度超过行高，那么它

15、的盒子上下部分将和其他元素的盒超过行高，那么它的盒子上下部分将和其他元素的盒子重叠。子重叠。v因此，不推荐对行内元素直接设置盒子属性，一般先因此，不推荐对行内元素直接设置盒子属性，一般先设置行内元素以设置行内元素以块级元素显示块级元素显示，再设置它的盒子属性。，再设置它的盒子属性。 改变行内元素的高度改变行内元素的高度v 如图所示，当增加行内元素的边界和填充时，行内元素如图所示，当增加行内元素的边界和填充时，行内元素a占据占据浏览器的高度并没有增加，下面这个浏览器的高度并没有增加，下面这个div块仍然在原来的位置，块仍然在原来的位置，导致行内元素盒子的上下部分重叠，而左右部分不会受影响导致行内

16、元素盒子的上下部分重叠，而左右部分不会受影响 display属性属性v通过通过display属性可控制元素是以行内元素显示还是以属性可控制元素是以行内元素显示还是以块级元素显示，或不显示块级元素显示，或不显示vdisplay:block | inline | none | list-itemblockblock元素元素vblockblock元素的特点是：元素的特点是：总是在新行上开始；总是在新行上开始；高度，行高以及顶和底边距都可控制；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的宽度缺省是它的容器的100%100%，除非用，除非用widthwidth设定一设定一个宽度个宽度, , ,

17、 , , , , , 和和 是块是块元素的例子。元素的例子。 inline元素元素inline元素的特点是：元素的特点是：v和其他元素都在一行上和其他元素都在一行上v高，行高及顶和底边距不可改变；高，行高及顶和底边距不可改变；v宽度就是它的文字或图片的宽度，不可改变。宽度就是它的文字或图片的宽度，不可改变。, , , , , 和和是是inline元素的例子元素的例子 列表项元素列表项元素display: list-itemv在在html中只有中只有li元素默认是此类型，将元素设置为元素默认是此类型，将元素设置为列表项元素后将按列表元素显示，再通过设置列列表项元素后将按列表元素显示，再通过设置列

18、表选项可使元素的左边出现小黑点。表选项可使元素的左边出现小黑点。 隐藏元素隐藏元素display: none;v当某个元素被设置成了隐藏元素之后，浏览器会完全当某个元素被设置成了隐藏元素之后，浏览器会完全忽略掉这个元素，该元素将不会被显示，也不会占据忽略掉这个元素，该元素将不会被显示，也不会占据文档中的位置。像文档中的位置。像title元素默认就是此类型。元素默认就是此类型。v比较比较visibility: hidden; v制作下拉菜单、制作下拉菜单、tab面板等有时就需要用面板等有时就需要用display: none把菜单或面板隐藏起来把菜单或面板隐藏起来需要使用需要使用display属性

19、切换的情况属性切换的情况1.让一个让一个inline元素从新行开始；元素从新行开始；2.让块元素和其他元素保持在一行上；让块元素和其他元素保持在一行上；3.控制控制inline元素的宽度元素的宽度;4.控制控制inline元素的高度（对导航条特别有用）；元素的高度（对导航条特别有用）；5. 无须设定宽度即可为一个块元素设定与文字同宽的无须设定宽度即可为一个块元素设定与文字同宽的背景色背景色 标准流下定位的应用制作竖直导航菜单标准流下定位的应用制作竖直导航菜单#nav a font-size: 14px;color: #333333;text-decoration: none;backgroun

20、d-color: #CCCCCC;display: block;width:140px;padding: 6px 10px 4px;border: 1px solid #000000;margin: 2px;#nav a:hover color: #FFFFFF;background-color: #666666;盒子的盒子的marginmargin叠加问题叠加问题盒子的盒子的margin在标准流中的计算在标准流中的计算v 实验实验1行内元素之间的水平行内元素之间的水平margin span.leftmargin-right:30px;background-color:#a9d6ff;span

21、.rightmargin-left:40px;background-color:#eeb0b0;行内元素之间的水平行内元素之间的水平marginv行内元素之间的水平行内元素之间的水平margin不会叠加不会叠加span 2span 1margin-rightmargin-left 实验2块级元素之间的竖直margin 块元素1块元素2块元素块元素1块元素块元素2块元素块元素1块元素块元素2margin-bottom:50pxmargin-top:30pxmargin-bottom:50px块级元素之间的上下块级元素之间的上下margin空白边叠加空白边叠加v 当一个元素包含在另一个元素中时，若

22、父元素的边框和填充为当一个元素包含在另一个元素中时，若父元素的边框和填充为0，此时父元素和子元素的，此时父元素和子元素的margin挨在一起，那么父元素的上挨在一起，那么父元素的上下下margin也会和子元素的上下也会和子元素的上下margin发生叠加。若父元素的边发生叠加。若父元素的边框或填充不为框或填充不为0，那么父元素和子元素的，那么父元素和子元素的margin会被分隔开，会被分隔开，因此不存在叠加的问题。因此不存在叠加的问题。v 经验：如果有盒子嵌套，要调整外面盒子和里面盒子之间的距经验：如果有盒子嵌套，要调整外面盒子和里面盒子之间的距离，一般用外面盒子的离，一般用外面盒子的paddi

23、ng来调整，不要用里面盒子的来调整，不要用里面盒子的margin，这样可以避免空白边叠加的现象出现，这样可以避免空白边叠加的现象出现 嵌套盒子之间的嵌套盒子之间的marginv盒子在标准流中的定位原则盒子在标准流中的定位原则 实验实验3嵌套盒子之间的嵌套盒子之间的margin 嵌套盒子在嵌套盒子在IE和和Firefox中的不同显示中的不同显示v 当一个块元素包含在另一个块元素中时，若对父块设置高当一个块元素包含在另一个块元素中时，若对父块设置高度，但父块的高度不足以容纳子块时，度，但父块的高度不足以容纳子块时，IE将使父块的高度将使父块的高度自动伸展，达到能容纳子块的最小高度为止；若同时设置自

24、动伸展，达到能容纳子块的最小高度为止；若同时设置了子块高度，了子块高度，IE有时使子块高度自动压缩，直到能容纳内有时使子块高度自动压缩，直到能容纳内容的最小高度为止。而容的最小高度为止。而Firefox对父块和子块均以定义的高对父块和子块均以定义的高度为准，父块高度不会伸展，任其子块露在外面，子块高度为准，父块高度不会伸展，任其子块露在外面，子块高度也不会压缩。度也不会压缩。 v从这里可以看出，从这里可以看出，Firefox对元素的高度解释严格按照对元素的高度解释严格按照我们设定的高度执行，而我们设定的高度执行，而IE对元素高度的设定有点自对元素高度的设定有点自作主张的味道，它总是使标准流中子

25、元素的盒子包含作主张的味道，它总是使标准流中子元素的盒子包含在父元素盒子当中。在父元素盒子当中。 背景的控制背景的控制 CSS的背景属性的背景属性v 背景（背景（background）是网页中常用的一种表现方法，无）是网页中常用的一种表现方法，无论是单纯的背景颜色还是背景图片，都能为网页带来丰论是单纯的背景颜色还是背景图片，都能为网页带来丰富的视觉效果，富的视觉效果，HTML的很多元素都具有的很多元素都具有bgcolor和和backgroud属性，可以设置背景颜色和背景图片，如属性，可以设置背景颜色和背景图片，如（table、td等），但形式比较单一，对背景图片的设定，等），但形式比较单一，对

26、背景图片的设定，只支持在只支持在X轴和轴和Y轴都平铺的方式，因此，如果同时设轴都平铺的方式，因此，如果同时设置了背景颜色和背景图片，那么背景颜色将被背景图片置了背景颜色和背景图片，那么背景颜色将被背景图片挡住，以背景图片来显示。挡住，以背景图片来显示。v 而而CSS对元素的背景设置，则提供了更多的途径，如背对元素的背景设置，则提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在景图片既可以平铺也可以不平铺，还可以在X轴平铺或轴平铺或在在Y轴平铺，当背景图片不平铺时，并不会完全挡住背轴平铺，当背景图片不平铺时，并不会完全挡住背景颜色，因此可以综合设置背景颜色和背景图片达到希景颜色，因此可

27、以综合设置背景颜色和背景图片达到希望的效果。望的效果。v CSS的背景属性是的背景属性是backgroud或以或以backgroud开头开头 CSS的背景属性的背景属性属性属性描述描述可用值可用值background设置背景的所有控制选项，是其他设置背景的所有控制选项，是其他所有背景属性的缩写所有背景属性的缩写其他背景属性的值的集合其他背景属性的值的集合background-color设置背景颜色设置背景颜色rgb颜色颜色命名颜色命名颜色16进制颜色进制颜色background-image设置背景图片设置背景图片urlbackground-repeat设置背景图片的平铺方式设置背景图片的平铺方

28、式repeat（完全平铺）（完全平铺）repeat-x（横向平铺）（横向平铺）repeat-y（纵向平铺）（纵向平铺）no-repeat（不平铺）（不平铺）background-attachment设置背景图片固定还是随设置背景图片固定还是随内容滚动内容滚动scroll（默认值）（默认值）fixedbackground-position设置背景图片显示的起始设置背景图片显示的起始位置位置（top leftcenter centerbottom right）（x% y%x-pos y-pos）各个背景属性的默认值各个背景属性的默认值vbackground-color: transparent 透

29、明模式透明模式vbackground-image: none vbackground-repeat: repeat平铺平铺 vbackground-attachment: scroll vbackground-position: 0% 0%background属性的缩写属性的缩写vbackground属性是所有背景属性的缩写形式，就像属性是所有背景属性的缩写形式，就像font属性一样，其缩写顺序为：属性一样，其缩写顺序为：vbackground: background-color | background-image | background-repeat | background-attac

30、hment | background-positionv如如body background:#EFF4FF url(images/body_bg.jpg) repeat-x fixed;DW中的背景设置面板中的背景设置面板background-color:#0099ccbackground-image: url(img/bottom.gif)background-repeat: no-repeatbackground-position: right bottombackground-attachment: no-repeat背景的运用技巧背景的运用技巧背景的运用技巧背景的运用技巧v同时运用背景

31、颜色和背景图片同时运用背景颜色和背景图片v控制背景在盒子中的位置及是否平铺控制背景在盒子中的位置及是否平铺v多个元素背景的叠加多个元素背景的叠加 v滑动门技术滑动门技术 v背景位置的控制实现图片的翻转背景位置的控制实现图片的翻转v圆角的设计方法总结圆角的设计方法总结 同时运用背景颜色和背景图片同时运用背景颜色和背景图片v目前网页中流行采用一种渐变背景，即网页的背景从上至下由一种深颜色目前网页中流行采用一种渐变背景，即网页的背景从上至下由一种深颜色过渡到一种浅颜色，由于网页的长度通常是不好估计的，所以无法用一幅背过渡到一种浅颜色，由于网页的长度通常是不好估计的，所以无法用一幅背景图片来做这种渐变

32、背景，只能在网页的上部用渐变的图片做背景，下部使景图片来做这种渐变背景，只能在网页的上部用渐变的图片做背景，下部使用用一种和图片下部颜色相同的颜色做背景色用用一种和图片下部颜色相同的颜色做背景色v通过在通过在CSS中设置中设置body标记的背景颜色和背景图片，并把背景图片标记的背景颜色和背景图片，并把背景图片设置为横向平铺就可以实现渐变背景了。设置为横向平铺就可以实现渐变背景了。vbodybackground:#666666 url(xxwlzx/body_bg.gif) repeat-x; 控制背景在盒子中的位置及是否平铺控制背景在盒子中的位置及是否平铺 v 在在html中，背景图像只能平铺

33、，而在中，背景图像只能平铺，而在CSS中，背景图像能中，背景图像能做到精确定位，允许不平铺，效果就像普通的图像元素一做到精确定位，允许不平铺，效果就像普通的图像元素一样。因此有人建议所有的网页图像都作为元素的样。因此有人建议所有的网页图像都作为元素的CSS背景背景引入。例如下面的网页的背景就是用让背景图片不平铺并引入。例如下面的网页的背景就是用让背景图片不平铺并且定位于右下角实现的。且定位于右下角实现的。body background: #F7F2DF url(cha.jpg) no-repeat right bottom ;li元素的背景应用元素的背景应用v 通过背景图片不平铺的技术还可以用

34、来改变列表的项目符通过背景图片不平铺的技术还可以用来改变列表的项目符号，虽然使用列表元素号，虽然使用列表元素ul的的CSS属性属性list-style-image:url(arrow.gif)可以将列表项前面的小黑点改变成自可以将列表项前面的小黑点改变成自定义的小图片，但无法调整小图片和列表文字之间的距离。定义的小图片，但无法调整小图片和列表文字之间的距离。v 要解决这个问题，可以将小图片设置成要解决这个问题，可以将小图片设置成li元素的背景，不元素的背景，不平铺，且居左，为防止文字遮住图片，将平铺，且居左，为防止文字遮住图片，将li元素的左元素的左padding设置成设置成20px，这样还可

35、通过调整左，这样还可通过调整左padding的值实的值实现任意调整列表小图片和文字之间的距离。现任意调整列表小图片和文字之间的距离。 ullist-style-type:none; libackground:url(arrow.gif) no-repeat 0px 3px;/*距左边距左边0px，距上边距上边3px*/padding-left:20px;可以看出，有了背景的精确定位能力，完全可以使列表项目可以看出，有了背景的精确定位能力，完全可以使列表项目图片符号出现在图片符号出现在li元素中的任意位置上。元素中的任意位置上。 多个元素背景的叠加多个元素背景的叠加 v背景图片的叠加是很重要的背

36、景图片的叠加是很重要的CSS技术，当两个元素是技术，当两个元素是嵌套关系时，那么里面元素的盒子背景的不透明部分嵌套关系时，那么里面元素的盒子背景的不透明部分将覆盖在外面元素盒子背景之上，利用这一点，再结将覆盖在外面元素盒子背景之上，利用这一点，再结合对背景图片位置的控制，可以得到滑动门技术。下合对背景图片位置的控制，可以得到滑动门技术。下面以面以4图像可变宽图像可变宽度圆角栏目框的制作来介绍多个元度圆角栏目框的制作来介绍多个元素背景叠加的技巧素背景叠加的技巧 圆角的设计圆角的设计v固定宽圆角固定宽圆角v可变宽圆角可变宽圆角4图像可变宽度圆角栏目框图像可变宽度圆角栏目框 这是圆角矩形的标题这是圆

37、角矩形的标题4图像可变宽度圆角栏目框图像可变宽度圆角栏目框 #round background-image: url(xxwlzx/tly.gif);background-repeat: no-repeat;background-color: #00FF99;width: 244px;#round h3 background-image: url(xxwlzx/tly2.gif);background-repeat: no-repeat;background-position: right top;text-align: center;padding: 12px;margin: 0px;#ro

38、und p background-image: url(xxwlzx/tly4.gif);background-repeat: no-repeat;background-position: left bottom;margin: 0px;#round span background-image: url(xxwlzx/tly3.gif);background-repeat: no-repeat;background-position: right bottom;display: block;padding: 16px;font-size: 14px;line-height: 140%;colo

39、r: #FF0000;最后再设置背景色最后再设置背景色v由于几层背景的叠加，背景色只能放在最底层的盒子由于几层背景的叠加，背景色只能放在最底层的盒子上，也就是对最外层的元素设置背景色，这样背景色上，也就是对最外层的元素设置背景色，这样背景色就不会把背景图片给覆盖了。与此相反，为了让内容就不会把背景图片给覆盖了。与此相反，为了让内容能放在距边框有一定边距的区域，必须设置能放在距边框有一定边距的区域，必须设置padding值，而且值，而且padding值只能设置在最里层的盒子上。值只能设置在最里层的盒子上。v但这个圆角框没有边框，要制作带有边框的可变宽度但这个圆角框没有边框，要制作带有边框的可变宽

40、度圆角框，需要采用圆角框，需要采用5图像二维滑动门法制作图像二维滑动门法制作 滑动门技术背景的高级运用滑动门技术背景的高级运用 图片阴影，自适用宽度圆角导航条 1. 图像阴影图像阴影v阴影是一种很流行、很有吸引力的图像处理技巧，它阴影是一种很流行、很有吸引力的图像处理技巧，它给平淡的设计增加了深度，形成立体感。使用图像处给平淡的设计增加了深度，形成立体感。使用图像处理软件很容易给图像增添阴影。但是，可以使用理软件很容易给图像增添阴影。但是，可以使用CSS产生简单阴影效果，而不需要修改底层的图像。通过产生简单阴影效果，而不需要修改底层的图像。通过滑动门技术制作的阴影能自适应图像的大小，即不管滑动

41、门技术制作的阴影能自适应图像的大小，即不管图像是大是小都能为它添加阴影效果。图像是大是小都能为它添加阴影效果。 滑动门制作图片阴影原理图滑动门制作图片阴影原理图 透透 明明图图 像像图图 像像图图 像像图图 像像2. 自适应宽度圆角导航条自适应宽度圆角导航条v原理：背景图片比盒子长一些原理：背景图片比盒子长一些v背景图片：背景图片：v里面的盒子里面的盒子设置背景图片为从右边开始铺设置背景图片为从右边开始铺v外面的盒子外面的盒子v设置背景图片为从左边开始铺设置背景图片为从左边开始铺v把里面的盒子放在外面盒子上方，则两边的圆角把里面的盒子放在外面盒子上方，则两边的圆角都能显示，同时，改变文字的多少

42、，能使导航条都能显示，同时，改变文字的多少，能使导航条自动伸展，而圆角部分位于自动伸展，而圆角部分位于padding区域，不会影区域，不会影响圆角响圆角滑动门导航条代码滑动门导航条代码a font-size: 14px;color: #F1E474;text-decoration: none;background-image: url(xxwlzx/yuanjiao2.gif);height: 32px;padding-left: 24px;display: block;float: left;line-height: 32px;b background-image: url(xxwlzx/y

43、uanjiao2.gif);background-position: right top;display: block;padding-right: 24px;a:hover color: #FFFFFF;首首 页页 中心简介中心简介 政策法规政策法规 常用下载常用下载 为您服务为您服务 技术支持和服务技术支持和服务背景图案的翻转控制背景的显示区域背景图案的翻转控制背景的显示区域 v通过背景定位技术可使背景图片出现在盒子的任意位通过背景定位技术可使背景图片出现在盒子的任意位置上，如果盒子没有背景那么大，那么只能显示背景置上，如果盒子没有背景那么大，那么只能显示背景图的一部分，利用这一点，我们可

44、以将多个背景图片图的一部分，利用这一点，我们可以将多个背景图片放置在一个大的背景图里，让每个元素只显示这张大放置在一个大的背景图里，让每个元素只显示这张大背景图的一部分，例如制作导航条时，可以让链接状背景图的一部分，例如制作导航条时，可以让链接状态显示背景图的上一部分，鼠标滑过时显示背景图的态显示背景图的上一部分，鼠标滑过时显示背景图的下一部分，这就是背景的翻转，使我们只用一幅图片下一部分，这就是背景的翻转，使我们只用一幅图片就能实现背景图的切换。就能实现背景图的切换。通过背景图片位置控制实现图片翻转通过背景图片位置控制实现图片翻转#nav li acolor:#FFFFFF;text-dec

45、oration:none;padding-top:7px;display:block;width:97px;height:19px;text-align:center;background:url(img/nav.gif);margin-left:2px;#nav li a:hoverbackground:url(img/nav.gif); background-position:0px -26px;/* background-position:left center;*/color:#FFFFFF; 将滑动门技术和背景图片翻转结合的例子将滑动门技术和背景图片翻转结合的例子a:hover ba

46、ckground-position:100% -42px;a:hover bbackground-position:0 -42px;color: #FF0000; CSS CSS圆角设计圆角设计圆角的设计方法圆角的设计方法v圆角在网页设计中让人又爱又恨，一方面设计师为追圆角在网页设计中让人又爱又恨，一方面设计师为追求美观的效果经常需要借助于圆角，另一方面为了在求美观的效果经常需要借助于圆角，另一方面为了在网页中设计圆角又不得不增添很多工作量。网页中设计圆角又不得不增添很多工作量。 v制作固定宽度的圆角（不带边框的、带边框的）制作固定宽度的圆角（不带边框的、带边框的）v制作可变宽度圆角（不带边框

47、的、带边框的）制作可变宽度圆角（不带边框的、带边框的）v不用图片做圆角不用图片做圆角 1. 制作固定宽度的圆角框制作固定宽度的圆角框v用用CSS制作不带边框的固定宽度圆角框（如图制作不带边框的固定宽度圆角框（如图4-57左左所示）至少需要两个盒子，一个盒子放置顶部的圆角所示）至少需要两个盒子，一个盒子放置顶部的圆角图案，另一个盒子放置底部的圆角图案，并使它位于图案，另一个盒子放置底部的圆角图案，并使它位于盒子底部。把这两个盒子叠放在一起，再对栏目框设盒子底部。把这两个盒子叠放在一起，再对栏目框设置和圆角相同的背景色就可以了置和圆角相同的背景色就可以了 v制作带边框的固定宽度圆角框（如图制作带边

48、框的固定宽度圆角框（如图4-57右所示）则右所示）则至少需要三个盒子，最底层的盒子放置圆角框中部的至少需要三个盒子，最底层的盒子放置圆角框中部的边框和背景组成的图案，并使它垂直平铺，上面两层边框和背景组成的图案，并使它垂直平铺，上面两层的盒子分别放置顶部的圆角和底部的圆角，这样在顶的盒子分别放置顶部的圆角和底部的圆角，这样在顶部和底部圆角图片就遮盖了中部的图案，形成了完整部和底部圆角图片就遮盖了中部的图案，形成了完整的圆角框的圆角框 2. 制作可变宽度圆角制作可变宽度圆角 v制作可变宽度不带边框的圆角框就是前面介绍的制作可变宽度不带边框的圆角框就是前面介绍的4图图像法制作圆角框，而要制作带边框

49、的可变宽度圆角则像法制作圆角框，而要制作带边框的可变宽度圆角则要采用要采用5图像二维滑动门方法图像二维滑动门方法 3. 不用图片做圆角山顶角方法不用图片做圆角山顶角方法v如果不想用图片做圆角，那也是可以实现的，这需要如果不想用图片做圆角，那也是可以实现的，这需要一种称为山顶角一种称为山顶角(mountaintop corner)的圆角制作方法，的圆角制作方法，所谓山顶角，就是说不是纯粹意义上的平滑圆角，而所谓山顶角，就是说不是纯粹意义上的平滑圆角，而是通过几个是通过几个1像素高的像素高的div（水平细线）叠放起来形成（水平细线）叠放起来形成视觉上的圆角，用这种方法做圆角一般采用视觉上的圆角，用

50、这种方法做圆角一般采用4个个div叠叠放，所以圆角的弧度不是很大。放，所以圆角的弧度不是很大。 3. 不用图片做圆角山顶角方法不用图片做圆角山顶角方法v如果把最上方一条细线的颜色改为黑色，再设置下面如果把最上方一条细线的颜色改为黑色，再设置下面三条细线的左右边框是三条细线的左右边框是1像素黑色，那么就出现了带像素黑色，那么就出现了带有边框的圆角框效果了有边框的圆角框效果了 4. 学习圆角制作的意义学习圆角制作的意义v由于人们的审美观念决定了圆角比方角更具有亲和力，由于人们的审美观念决定了圆角比方角更具有亲和力，使我们很多时候必须制作圆角框。另外，圆角框技术使我们很多时候必须制作圆角框。另外，圆

51、角框技术是制作其他不规则图案栏目框的基础。例如图是制作其他不规则图案栏目框的基础。例如图4-61所所示的栏目框，就可以把栏目框上面部分看成是上圆角，示的栏目框，就可以把栏目框上面部分看成是上圆角，下面部分看成是下圆角，再按照制作圆角框的思路制下面部分看成是下圆角，再按照制作圆角框的思路制作了。作了。 盒子的浮动盒子的浮动盒子的浮动盒子的浮动 v在标准流中，块级元素的盒子都是上下排列，行内元在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，如果仅仅按照标准流的方式素的盒子都是左右排列，如果仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太大。进行排列，就只有这几种可能性，

52、限制太大。CSS的的制订者也想到了这样排列限制的问题，因此又给出了制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。性大大提高。v例如：有时希望相邻块级元素的盒子左右排列（所有例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动（最简单的办法就是运用浮动（float）属性使盒子在浮）属性使盒子在浮

53、动方式下定位。动方式下定位。 v在标准流中，一个块级元素在水平方向会自动伸展，在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行；而在竖直方向和其他在它的父元素中占满整个一行；而在竖直方向和其他元素依次排列，不能并排，如图元素依次排列，不能并排，如图4-62所示。使用所示。使用“浮浮动动”方式后，这种排列方式就会发生改变。方式后，这种排列方式就会发生改变。vCSS中有一个中有一个float属性，默认值为属性，默认值为none，也就是标准，也就是标准流通常的情况，如果将流通常的情况，如果将float属性的值设为属性的值设为left或或right，元素就会向其父元素的左侧或右

54、侧靠紧，同时盒子的元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。盒子里面的内容来确定宽度。1. 一个盒子浮动一个盒子浮动v接下来在上述代码中添加一条接下来在上述代码中添加一条CSS代码，使元素代码，使元素“.son1”浮动。代码如下：浮动。代码如下：v.son1float:left; v此时显示效果如图此时显示效果如图4-63所示，可发现给所示，可发现给“.son1”添加添加浮动属性后，浮动属性后，“.son1”的宽度不再自动伸展，而且不的宽度不再自动伸展，而且不再占据原来浏览

55、器分配给它的位置。如果再在未浮动再占据原来浏览器分配给它的位置。如果再在未浮动的盒子的盒子Box-2中添一行文本，就会发现中添一行文本，就会发现“.son2”中的内中的内容是环绕着浮动盒子的容是环绕着浮动盒子的 总结：一个盒子浮动后的特点总结：一个盒子浮动后的特点v（1）浮动后的盒子将以块级元素显示，但宽度不会）浮动后的盒子将以块级元素显示，但宽度不会自动伸展。自动伸展。v（2）浮动的盒子将脱离标准流，即不再占据浏览器）浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置（原来分配给它的位置（IE有时例外）。有时例外）。v（3）未浮动的盒子将占据浮动盒子的位置，同时未）未浮动的盒子将占据

56、浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。浮动盒子内的内容会环绕浮动后的盒子。 提示：所谓提示：所谓“脱离标准流脱离标准流”是指元素不再占据在标准流下浏是指元素不再占据在标准流下浏览器分配给它的空间，其他元素就好像这个元素不存在一样。览器分配给它的空间，其他元素就好像这个元素不存在一样。例如图例如图4-63中，当中，当Box-1浮动后，浮动后，Box-2就顶到了就顶到了Box-1的位的位置，相当于置，相当于Box-2视视Box-1不存在一样。但是，浮动元素并没不存在一样。但是，浮动元素并没有完全脱离标准流，这表现在浮动盒子会影响未浮动盒子中有完全脱离标准流，这表现在浮动盒子会影

57、响未浮动盒子中内容的排列，例如内容的排列，例如Box-2中的内容会跟在中的内容会跟在Box-1盒子之后进行盒子之后进行排列，而不会忽略排列，而不会忽略Box-1盒子的存在。盒子的存在。 2. 多个盒子浮动多个盒子浮动v多个盒子都浮动后，就产生了块级元素水平排列的效多个盒子都浮动后，就产生了块级元素水平排列的效果果 v 多个浮动元素不会相互覆盖，一个浮动元素的外多个浮动元素不会相互覆盖，一个浮动元素的外边界（边界（margin）碰到另一个浮动元素的外边界后便停）碰到另一个浮动元素的外边界后便停止运动。止运动。v 若包含的容器太窄，无法容纳水平排列的多个浮若包含的容器太窄，无法容纳水平排列的多个浮

58、动元素，那么最后的浮动盒子会向下移动（图动元素，那么最后的浮动盒子会向下移动（图4-68）。）。但如果浮动元素的高度不同，那当它们向下移动时可但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住能会被卡住 4.7.2 浮动的清除浮动的清除vclear是清除浮动属性，它的取值有是清除浮动属性，它的取值有left、right、both和和none（默认值），如果设置盒子的清除浮动属性（默认值），如果设置盒子的清除浮动属性clear值为值为left或或right，表示该盒子的左边或右边不允，表示该盒子的左边或右边不允许有浮动的对象。值设置为许有浮动的对象。值设置为both则表示两边都不允许则表示

59、两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显有浮动对象，因此该盒子将会在浏览器中另起一行显示示 vclear属性既可以用在未浮动的元素上，也可以用在浮属性既可以用在未浮动的元素上，也可以用在浮动的元素上，如果对动的元素上，如果对Box-3同时设置清除浮动和浮动，同时设置清除浮动和浮动，即：即：v.son3clear:both; float:left;v总结：清除浮动是清除其它盒子浮动对该元素的影响，总结：清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾，因此而设置浮动是让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动可同时设置元素清除浮动和浮动 4.7.3 浮动的浏览器解释问题浮动的浏览器解释问题v1. 元素浮动但是其父元素不浮动元素浮动但是其父元素不浮动v当设置了父元素的宽度或高度后，当设置了父元素的宽度或高度后，IE （非标准浏览（非标准浏览器）中的浮动元素将占据外围容器空间，器）中的浮动元素将占据外围容器空间，Firefox依然依然不占据不占据 3. 元素浮动但是其后面相邻元素不浮动元素浮动