第04部分-CSS技术.ppt

信息工程学院第4部分 CSS技术引入本部分内容1.CSS基础2.CSS属性值与单位3.CSS文本修饰应用4.盒子模型与标准流定位5.背景的控制6.相对定位与绝对定位7.盒子浮动8.CSS+DIV布局1.CSS基础CSS（Cascading Style Sheets的缩写），是用于控制网页样式并允许将样式与网页内容分离的一种标记性语言。HTML和CSS的关系就是“内容”和“形式”的关系，由(X)HTML组织网页的结构和内容，而通过CSS来决定页面的表现形式。目前的Web设计标准：网页的所有内容都在XHTML网页中设计；网页的所有样式都放置在CSS中。1.1 CSS的语法CSS样式表由一系列样式规则组成，浏览器将这些规则应用到相应的元素上，样式表中规则间用英文分号(;)分隔。每条规则由两部分组成：选择器和声明。每条声明又是属性和值的组合，属性与值间用英文冒号(:)分隔。1.2 在HTML中引入CSS的方法1.直接在标签的style属性进行设置(行内式)格式是-某个属性：值2.在XHTML页面中直接使用(嵌入式)在标签中加入1.2 在HTML中引入CSS的方法3.链接外部样式表（.css文件）在head标签中使用 href：表示引用哪个.css文件；rel：是指在页面中使用这个外部的样式表 type：指文件的类型是样式表文本 4.导入外部样式表 在head标签中使用（这种方式不要忘了分号；)5.链接与导入的区别link属于XHTML标签，而import完全是CSS提供的一种方式。当一个页面被加载的时候，link引用的CSS会同时被加载，而import引用的CSS会等到页面全部被下载完再被加载。import是CSS2.1提出的所以老的浏览器不支持，link不存在这个问题。目前使用link链接.CSS是个不错的选择！1.3 CSS选择器要想使CSS样式应用到特定的XHTML元素，需要找到这个元素，执行这一任务的样式规则叫选择器。1.标签选择器body color:#111111;font-size:12px;img border-width:0;对应的标签对应相应的样式；2.id选择器（整个文档中这种样式是唯一的）测试文本#intro font-weight:bold;1.3 CSS选择器3.class选择器 多个地方需要使用同种样式 测试1 测试2 css样式 .introfont-weight:bold;4.伪类选择器 指定的对象在文档中并不存在，标签的某个状态 a:link color:#FF0000/*未被访问的链接为红色*/a:visited color:#00FF00/*已被访问过的链接为绿色*/a:hover color:#FFCC00/*鼠标悬浮在上的链接为橙色*/a:active color:#0000FF/*鼠标点中激活链接为蓝色*/I-V-H-A，请按这样的次序，否则可能失效！1.3 CSS选择器5.选择器的灵活组合 （1）嵌套选择器 Welcome 应用CSS#mainco pcolor:red;.样式定义#HeadTop#Logo (2)编组选择器 选择器将分英文逗号分隔 h1,h2 color:red;1.4 CSS的层叠性CSS具有两个特性：层叠性和继承性。所谓层叠性是指多个选择器的作用范围发生了叠加。当多个样式规则作用于同一元素时：（1）如果多个规则未发生冲突，则元素将应用所有规则。（2）如果多个样式规则发生了冲空，则CSS按照选择器的优先级高低来处理。行内样式 ID样式 类样式 标记样式 如果优先级相同,则以后定义的为准（一般情况下）1.5 CSS的继承性 CSS的继承性是指如果子元素定义的样式没有和父元素定义的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素的基础上再加以修改，定义自己的新属性。合理利用CSS的继承性，可以大大缩减代码量，并提高可读性。需要注意：并不是所有的CSS属性都具有继承性，具体可参考CSS手册。本部分内容1.CSS基础2.CSS属性值与单位3.CSS文本修饰应用4.盒子模型与标准流定位5.背景的控制6.相对定位与绝对定位7.盒子浮动8.CSS+DIV布局值是对属性的具体描述，而单位是值的基础。在大多数情况下，没有单位的值，浏览器将不知如何处理。在CSS中较复杂的值和单位有：颜色长度（大小）颜色的值CSS中定义颜色值可以使用命名颜色、rgb颜色和十六进制颜色三种方法。命名颜色颜色的英文名称，如：red、blue等rgb颜色函数按三原色原理合成颜色，如：rgb(255,128,0)十六进制颜色描述按三原色原理合成颜色，如：#FF8800本部分内容1.CSS基础2.CSS属性值与单位3.CSS文本修饰应用4.盒子模型与标准流定位5.背景的控制6.相对定位与绝对定位7.盒子浮动8.CSS+DIV布局CSS文本修饰应用网页中文字的美化是网页美观的一个基本要求，通过CSS的强大的文本修饰功能，可以对网页中的文字进行更精细的控制。CSS中控制文本样式的属性主要有：“font-”开头的属性“text-”开头的属性修改文本颜色的“color”属性行高“line-height”属性本部分内容1.CSS基础2.CSS属性值与单位3.CSS文本修饰应用4.盒子模型与标准流定位5.背景的控制6.相对定位与绝对定位7.盒子浮动8.CSS+DIV布局盒子模型与标准流定位在网页的布局和页面元素的表现方面，最重要的是CSS的盒子模型以及盒子在浏览器中的排列。盒子模型是CSS的基石之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框与边界组成。网页就是由许多个盒子通过不同的排列方式（上下、左右、嵌套）组合而成。4.1 盒子模型基础marginmargin：边界界，四个方向为margin-top，margin-right，margin-bottom，margin-leftborderborder：边框框，四个方向为border-top，border-right，border-bottom，border-leftpaddingpadding：填充：填充，四个方向为padding-top，padding-right，padding-bottom，padding-leftcontentcontent：主体内容：主体内容说明：在左图中，盒子模型，不包括最外的黑色框。4.1.1 盒子大小计算在利用盒子排版时，就要精确的理解盒子大小的计算方法。盒子模型中的填充、边框、边界值都可以通过相应属性分别来设置，内容区的大小可以通过width和height来设置。填充、边框和边界值的变化，不会影响内容区域的大小，便会使得盒子的大小发生变化。例如下面的样式#MyBox margin:10px;padding:5px;border-width:0px;width:70px;/内容的宽度 这个区域的宽度=左边距+左边框+左填充+内容宽度+右填充+右边框+右边距 =10px+0px+5px+70px+5px+0px+10px =100px4.1.2 边框属性盒子模型中的margin和padding属性比较简单，只能设置其大小。边框可以设置宽度、颜色和样式。border属性主要有三个：border-width、border-color、border-style。其中border-style属性在不同的浏览器中，如IE、Firefox和Chrom等中略有差别。4.1.3 盒子模型属性的缩写盒子边界、填充或边框宽度的缩写如只给定一个值，则表示其上下左右的值都相同如给定两个值，则分别表示上下、左右的值如给定三个值，则分别表示上、左右、下的值如给定四个值，则分别表示上、右、下、左的值边框border属性的缩写border:border-width|border-style|border-color可以分别设置border-style和border-color可以类似这样：border-right-color、border-top-color4.1.4 盒子模型属性的默认值大多数HTML元素的盒子属性（margin、padding、border-width）默认值为0。有少数HTML元素的margin和padding的默认值 不为0，如：body、p、ul、li等。表单元素中大部分input元素的边框属性默认值 不为0。4.2 盒子模型的应用1.美化表单 网页中的表单控件在默认情况下背景都是灰色的，文本框边框是粗线条带立体感的，不够美观。可以通过CSS改变表单的边框样式、颜色和背景颜色让文本框，按钮等变得漂亮些。课堂演示 “标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。4.3 盒子在标准流下的定位4.3.1 行内元素与块元素行内元素(inline)是指元素与元素之间从左到右并排排列，只有当浏览器窗口容纳不下才会转到下一行，块级元素(block)是指每个元素占据浏览器一整行位置，块级元素与块级元素之间自动换行，从上到下排列。块级元素内部可包含行内元素或块级元素，行内元素内部可包含行内元素，但不得包含块级元素，另外，块级元素元素内部也不能包含其他的块级元素。1块级元素（block level）li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。因此，这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。2行内元素（inline）对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。比如标记，就是一个典型的行内元素，这个标记本身不占有独立的区域，仅仅是在其他元素的基础上指出了一定的范围。再比如，最常用的标记，也是一个行内元素。3 div与spandivspan div与span的区别 div标记不同行：span标记同一行：与与标记的区别标记的区别4.3.2 盒子在标准流中的定位原则行内元素与块元素之间的水平margin行内元素之间的行内元素之间的margin4.3.3 块级元素之间的竖直margin 如果不是行内元素，而是竖直排列的块级元素，margin的取值情况就会有所不同。两个块级元素之间的距离不是margin-bottom与margin-top的总和，而是两者中的较大者，如图所示。图图4.20 块元素之间的块元素之间的margin 这个现象称为margin的“塌陷”（或称为“合并”）现象，意思是说较小的margin塌陷（合并）到了较大的margin中。4.3.4 嵌套盒子之间的margin 除了上面提到的行内元素间隔和块级元素间隔这两种关系外，还有一种位置关系，它的margin值对CSS排版也有重要的作用，这就是父子关系。当一个块包含在另一个块中时，便形成了典型的父子关系。其中子块的margin将以父块的内容为参考，如图所示。父子块的父子块的margin IE与与Firefox对待父对待父height的不同处理的不同处理4.3.5 margin属性可以设置为负值上面提及margin的时候，它的值都是正数。其实margin的值也可以设置为负数，而且有关的巧妙运用方法也非常多，在后续学习中都会续介绍。当margin设为负数时，会使被设为负数的块向相反的方向移动，甚至覆盖在另外的块上。父子块设置父子块设置margin为负数为负数本部分内容1.CSS基础2.CSS属性值与单位3.CSS文本修饰应用4.盒子模型与标准流定位5.背景的控制6.相对定位与绝对定位7.盒子浮动8.CSS+DIV布局CSS的背景属性背景（background）是网页中常用的一种表现方法，无论是单纯的背景颜色还是背景图片，都能为网页带来丰富的视觉效果。HTML的很多元素都具有bgcolor和backgroud属性，可以设置背景颜色和背景图片，如（table、td等），但形式比较单一，对背景图片的设定，只支持在X轴和Y轴都平铺的方式。CSS的背景属性CSS对元素的背景设置，则提供了更多的途径，如背景图片既可以平铺也可以不平铺，还可以在X轴平铺或在Y轴平铺，当背景图片不平铺时，并不会完全挡住背景颜色，因此可以综合设置背景颜色和背景图片达到希望的效果。CSS的背景属性是backgroud或以backgroud开头 CSS的背景属性属性属性描述描述可用可用值值background设设置背景的所有控制置背景的所有控制选项选项，是其他所有背景属性的是其他所有背景属性的缩缩写写其他背景属性的其他背景属性的值值的集合的集合background-color设设置背景置背景颜颜色色rgb颜颜色色命名命名颜颜色色16进进制制颜颜色色background-image设设置背景置背景图图片片urlbackground-repeat设设置背景置背景图图片的平片的平铺铺方式方式repeat（完全平（完全平铺铺）repeat-x（横向平（横向平铺铺）repeat-y（纵纵向平向平铺铺）no-repeat（不平（不平铺铺）background-attachment设设置背景置背景图图片固定片固定还还是随内容是随内容滚动滚动scroll（默（默认值认值）fixedbackground-position设设置背景置背景图图片片显显示的示的起始位置起始位置（top leftcenter centerbottom right）（x%y%x-pos y-pos）各个背景属性的默认值background-color:transparent 透明模式background-image:none background-repeat:repeat平铺 background-attachment:scroll background-position:0%0%background属性的缩写background属性是所有背景属性的缩写形式，就像font属性一样，其缩写顺序为：background:background-color|background-image|background-repeat|background-attachment|background-position如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背景的运用技巧背景的运用技巧同时运用背景颜色和背景图片控制背景在盒子中的位置及是否平铺多个元素背景的叠加 滑动门技术 背景位置的控制实现图片的翻转圆角的设计方法总结 同时运用背景颜色和背景图片目前网页中流行采用一种渐变背景，即网页的背景从上至下由一种深颜色过渡到一种浅颜色，由于网页的长度通常是不好估计的，所以无法用一幅背景图片来做这种渐变背景，只能在网页的上部用渐变的图片做背景，下部使用用一种和图片下部颜色相同的颜色做背景色通过在CSS中设置body标记的背景颜色和背景图片，并把背景图片设置为横向平铺就可以实现渐变背景了。bodybackground:#666666 url(xxwlzx/body_bg.gif)repeat-x;控制背景在盒子中的位置及是否平铺 在html中，背景图像只能平铺，而在CSS中，背景图像能做到精确定位，允许不平铺，效果就像普通的图像元素一样。因此有人建议所有的网页图像都作为元素的CSS背景引入。例如下面的网页的背景就是用让背景图片不平铺并且定位于右下角实现的。body background:#F7F2DF url(cha.jpg)no-repeat right bottom;li元素的背景应用通过背景图片不平铺的技术还可以用来改变列表的项目符号，虽然使用列表元素ul的CSS属性list-style-image:url(arrow.gif)可以将列表项前面的小黑点改变成自定义的小图片，但无法调整小图片和列表文字之间的距离。要解决这个问题，可以将小图片设置成li元素的背景，不平铺，且居左，为防止文字遮住图片，将li元素的左padding设置成20px，这样还可通过调整左padding的值实现任意调整列表小图片和文字之间的距离。ullist-style-type:none;libackground:url(arrow.gif)no-repeat 0px 3px;padding-left:20px;可以看出，有了背景的精确定位能力，完全可以使列表项目图片符号出现在li元素中的任意位置上。多个元素背景的叠加 背景图片的叠加是很重要的CSS技术，当两个元素是嵌套关系时，那么里面元素的盒子背景的不透明部分将覆盖在外面元素盒子背景之上，利用这一点，再结合对背景图片位置的控制，可以得到滑动门技术。下面以4图像可变宽度圆角栏目框的制作来介绍多个元素背景叠加的技巧 圆角的设计固定宽圆角可变宽圆角4图像可变宽度圆角栏目框 这是圆角矩形的标题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;#round 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%;color:#FF0000;最后再设置背景色由于几层背景的叠加，背景色只能放在最底层的盒子上，也就是对最外层的元素设置背景色，这样背景色就不会把背景图片给覆盖了。与此相反，为了让内容能放在距边框有一定边距的区域，必须设置padding值，而且padding值只能设置在最里层的盒子上。但这个圆角框没有边框，要制作带有边框的可变宽度圆角框，需要采用5图像二维滑动门法制作 滑动门技术背景的高级运用 图片阴影，自适用宽度圆角导航条 1.图像阴影阴影是一种很流行、很有吸引力的图像处理技巧，它给平淡的设计增加了深度，形成立体感。使用图像处理软件很容易给图像增添阴影。但是，可以使用CSS产生简单阴影效果，而不需要修改底层的图像。通过滑动门技术制作的阴影能自适应图像的大小，即不管图像是大是小都能为它添加阴影效果。滑动门制作图片阴影原理图 透 明图 像图 像图 像图 像2.自适应宽度圆角导航条原理：背景图片比盒子长一些背景图片：里面的盒子设置背景图片为从右边开始铺外面的盒子设置背景图片为从左边开始铺把里面的盒子放在外面盒子上方，则两边的圆角都能显示，同时，改变文字的多少，能使导航条自动伸展，而圆角部分位于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/yuanjiao2.gif);background-position:right top;display:block;padding-right:24px;a:hover color:#FFFFFF;首 页 中心简介 政策法规 常用下载 为您服务 技术支持和服务背景图案的翻转控制背景的显示区域 通过背景定位技术可使背景图片出现在盒子的任意位置上，如果盒子没有背景那么大，那么只能显示背景图的一部分，利用这一点，我们可以将多个背景图片放置在一个大的背景图里，让每个元素只显示这张大背景图的一部分，例如制作导航条时，可以让链接状态显示背景图的上一部分，鼠标滑过时显示背景图的下一部分，这就是背景的翻转，使我们只用一幅图片就能实现背景图的切换。通过背景图片位置控制实现图片翻转#nav li acolor:#FFFFFF;text-decoration: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 background-position:100%-42px;a:hover bbackground-position:0-42px;color:#FF0000;CSS圆角设计圆角的设计方法圆角在网页设计中让人又爱又恨，一方面设计师为追求美观的效果经常需要借助于圆角，另一方面为了在网页中设计圆角又不得不增添很多工作量。制作固定宽度的圆角（不带边框的、带边框的）制作可变宽度圆角（不带边框的、带边框的）不用图片做圆角 1.制作固定宽度的圆角框用CSS制作不带边框的固定宽度圆角框至少需要两个盒子，一个盒子放置顶部的圆角图案，另一个盒子放置底部的圆角图案，并使它位于盒子底部。把这两个盒子叠放在一起，再对栏目框设置和圆角相同的背景色就可以了 制作带边框的固定宽度圆角1.制作固定宽度的圆角框制作带边框的固定宽度圆角框,则至少需要三个盒子，最底层的盒子放置圆角框中部的边框和背景组成的图案，并使它垂直平铺，上面两层的盒子分别放置顶部的圆角和底部的圆角，这样在顶部和底部圆角图片就遮盖了中部的图案，形成了完整的圆角框 2.制作可变宽度圆角 制作可变宽度不带边框的圆角框就是前面介绍的4图像法制作圆角框，而要制作带边框的可变宽度圆角则要采用5图像二维滑动门方法 3.不用图片做圆角山顶角方法如果不想用图片做圆角，那也是可以实现的，这需要一种称为山顶角(mountaintop corner)的圆角制作方法，所谓山顶角，就是说不是纯粹意义上的平滑圆角，而是通过几个1像素高的div（水平细线）叠放起来形成视觉上的圆角，用这种方法做圆角一般采用4个div叠放，所以圆角的弧度不是很大。3.不用图片做圆角山顶角方法如果把最上方一条细线的颜色改为黑色，再设置下面三条细线的左右边框是1像素黑色，那么就出现了带有边框的圆角框效果了 4.学习圆角制作的意义由于人们的审美观念决定了圆角比方角更具有亲和力，使我们很多时候必须制作圆角框。另外，圆角框技术是制作其他不规则图案栏目框的基础。如图所示的栏目框，就可以把栏目框上面部分看成是上圆角，下面部分看成是下圆角，再按照制作圆角框的思路制作了。本部分内容1.CSS基础2.CSS属性值与单位3.CSS文本修饰应用4.盒子模型与标准流定位5.背景的控制6.相对定位与绝对定位7.盒子浮动8.CSS+DIV布局（1）标准流）标准流 学完盒子模型之后知道网页是由一个个的盒子组成的，那么在最简单的不包含CSS的页面里，浏览器怎样定位各种盒子呢？在这种情况下，浏览器会根据各个盒子在浏览器会根据各个盒子在html中出现的顺序，中出现的顺序，由上而下由上而下一个接一个一个接一个的排的排列列，把这样方式称作“流”，这种流称之为“标准流标准流”。这种方式可用CSS属性position：static控制。6 相对定位与绝对定位 （2）相对定位）相对定位 使用CSS属性 position：relative，在相对定位下，元素的位置相对于它本来该出现的位置它本来该出现的位置的偏移。（2）相对定位）相对定位 使用CSS属性 position：relative，在相对定位下，元素的位置相对于它本来该出现的位置它本来该出现的位置的偏移。标准流中它应该出现的位置标准流中它应该出现的位置（3）绝对定位）绝对定位 使用CSS属性position:absolute，在绝对定位下，元素的位置相对于“最近最近”的“已定位已定位”的“祖先祖先”元素。（3）绝对定位）绝对定位 使用CSS属性position:absolute，在绝对定位下，元素的位置相对于“最近最近”的“已定位已定位”的“祖先祖先”元素。已定位已定位：position属性被设置且不是属性被设置且不是static。祖先祖先：从该元素开始一直到：从该元素开始一直到根根节点的所有元节点的所有元素。素。最近最近：距该元素距离最短的一个节点。：距该元素距离最短的一个节点。标准流中盒子的位置关系标准流中盒子的位置关系使用了绝对定位后盒子的位置关系使用了绝对定位后盒子的位置关系(2)(2)使用了绝对定位后盒子的位置关系使用了绝对定位后盒子的位置关系(1)(1)摄影师个人网站布局实例摄影师个人网站布局实例 (一)内容分析内容决定网页形式1.作品列表2.名称3.宣传语4.简介5.相关链接6.联系方式 (二)HTML结构设计根据内容设计出合理的XHTML文件结构。不关心显示效果，完全从网页的内容出发。(三)原型设计(三)CSS设计(1)(三)CSS设计(2)本部分内容1.CSS基础2.CSS属性值与单位3.CSS文本修饰应用4.盒子模型与标准流定位5.背景的控制6.相对定位与绝对定位7.盒子浮动8.CSS+DIV布局盒子的浮动 在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，如果仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太大。CSS的制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。盒子的浮动 例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动（float）属性使盒子在浮动方式下定位。在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行；而在竖直方向和其他元素依次排列，不能并排，如图所示。使用“浮动”方式后，这种排列方式就会发生改变。CSS中有一个float属性，默认值为none，也就是标准流通常的情况，如果将float属性的值设为left或right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。1.一个盒子浮动1.一个盒子浮动接下来在上述代码中添加一条CSS代码，使元素“.son1”浮动。代码如下：.son1float:left;此时显示效果如图4-63所示，可发现给“.son1”添加浮动属性后，“.son1”的宽度不再自动伸展，而且不再占据原来浏览器分配给它的位置。如果再在未浮动的盒子Box-2中添一行文本，就会发现“.son2”中的内容是环绕着浮动盒子的 总结：一个盒子浮动后的特点（1）浮动后的盒子将以块级元素显示，但宽度不会自动伸展。（2）浮动的盒子将脱离标准流，即不再占据浏览器原来分配给它的位置（IE有时例外）。（3）未浮动的盒子将占据浮动盒子的位置，同时未浮动盒子内的内容会环绕浮动后的盒子。总结：一个盒子浮动后的特点提示：所谓“脱离标准流”是指元素不再占据在标准流下浏览器分配给它的空间，其他元素就好像这个元素不存在一样。例如图4-63中，当Box-1浮动后，Box-2就顶到了Box-1的位置，相当于Box-2视Box-1不存在一样。但是，浮动元素并没有完全脱离标准流，这表现在浮动盒子会影响未浮动盒子中内容的排列，例如Box-2中的内容会跟在Box-1盒子之后进行排列，而不会忽略Box-1盒子的存在。2.多个盒子浮动多个盒子都浮动后，就产生了块级元素水平排列的效果 多个浮动元素不会相互覆盖，一个浮动元素的外边界（margin）碰到另一个浮动元素的外边界后便停止运动。若包含的容器太窄，无法容纳水平排列的多个浮动元素，那么最后的浮动盒子会向下移动（图4-68）。但如果浮动元素的高度不同，那当它们向下移动时可能会被卡住 4.7.2 浮动的清除clear是清除浮动属性，它的取值有left、right、both和none（默认值），如果设置盒子的清除浮动属性clear值为left或right，表示该盒子的左边或右边不允许有浮动的对象。值设置为both则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示 clear属性既可以用在未浮动的元素上，也可以用在浮动的元素上，如果对Box-3同时设置清除浮动和浮动，即：.son3clear:both;float:left;总结：清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动 4.7.3 浮动的浏览器解释问题1.元素浮动但是其父元素不浮动当设置了父元素的宽度或高度后，IE（非标准浏览器）中的浮动元素将占据外围容器空间，Firefox依然不占据 3.元素浮动但是其后面相邻元素不浮动设置了后面相邻元素的宽或高，则在IE中，浮动元素将仍然占据它原来的空间，未浮动元素跟在它后面 浮动的浏览器显示问题总结情 况未浮动的盒子不设宽或高对未浮动的盒子设置宽或高盒子浮动，其外层盒子未浮动IE和Firefox的显示效果一致IE浮动盒子将不会脱离标准流，Firefox浮动盒子仍然是脱离标准流的盒子浮动，后面相邻盒子未浮动 IE 6浮动元素的双倍margin错误 在IE6中，只要设置元素浮动，则设置左浮动，盒子的左margin会加倍，设置右浮动，盒子的右margin会加倍。这是IE6的一个bug（IE7已经修正了这个bug）。解决IE 6双倍margin错误的方法很简单，只要对浮动元素设置“display:inline;”就可了。代码如下：.son1float:left;display:inline;提示，即使对浮动元素设置“display:inline;”，它仍然会以块级元素显示，因为设置元素浮动后元素总是以块级元素显示的。当然，也可以不设置浮动盒子的margin，而设置其父元素盒子的padding值来避免这个问题，在实际应用中，可以设置padding的地方尽量用padding，而不要用margin 4.7.4 浮动的应用举例1 图文混排及首字下沉效果等2 菜单的竖横转换3 制作栏目框标题栏标题栏的左端是栏目标题，右端是“更多”之类的链接。如何将文字分别放在一个盒子的左右两端呢？最简单的办法就是设置左边的文字左浮动，右边的文字右浮动。这时由于两个盒子都浮动，不占据外围容器的空间，所以必须设置外围盒子h3的高度，使它在视觉上能包含住两个浮动的盒子|栏栏目目标题标题1 more网页的固定宽度1-3-1布局 在默认情况下，div作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如1-3-1固定宽度布局，我们希望中间三栏（三个div盒子）从左到右并列排列，这时就需要将这三个div盒子都设置为浮动。但三个div盒子都浮动后，只能浮动到窗口的左边或右边，无法在浏览器中居中，因此需要在三个div盒子外面再套一个盒子（称为container），让container居中，这样就实现了里面的三个div盒子居中 IE中的131布局示意图bodyheadercontainernavcontentsidepagefooterFirefox中的131布局示意图bodyheadercontainernavcontentsidepagefooter131布局的结构代码id=headerid=naviid=contentid=sideid=pagefooter131布局的CSS代码#header,#pagefooter,#containermargin:0 auto;width:772px;border:1px dashed#FF0000;#navi,#content,#sideborder:2px solid#0066FF;#navifloat:left;width:200px;#contentfloat:left;width:360px;#sidefloat:left;width:200px;#pagefooterclear:both;综合布局实例本部分内容1.CSS基础2.CSS属性值与单位3.CSS文本修饰应用4.盒子模型与标准流定位5.背景的控制6.相对定位与绝对定位7.盒子浮动8.CSS+DIV布局本部分结束