第4章 DIV+CSS页面布局

第4章页面布局内容提要4.4实用技巧和代码规范4.3页面布局4.2盒子之间的关系4.1概述4.5CSShack实现网页的页面布局一般有三种方法：表格布局框架布局DIV+CSS页面布局。4.1概述表格布局的实现方式比较简单。各个元素可以位于独立的单元格中，相互影响较小，而且对于浏览器的兼容性较好。表格布局也存在一些缺陷。首先，在某些浏览器下（例如IE），表格只有在全部下载完成后才可以显示。数据量比较大时会影响网页的浏览速度。其次，搜索引擎难以分析较复杂的表格，而且网页样式的改版也比较麻烦。另外，在多重表格嵌套的情况下，代码可读性较差，页面下载的速度也会受到影响。目前，除了规模较小的网站之外，一般不采用表格布局。框架布局指的是利用框架来对页面空间进行有效的划分，每个区域可以显示不同的网页内容，各个区域之间互不影响。使用框架进行布局，可以使网页更整洁、清晰，网页下载的速度较快。但是如果框架使用较多，也会影响网页的浏览速度。对于内容较多，较复杂的网站最好不要采用框架布局。另外，框架和浏览器的兼容性不好，保存比较麻烦，应用的范围有限，一般也只应用于较小规模的网站。对于规模较大的、比较复杂的网站大多数采用DIV+CSS方式来进行布局。DIV+CSS布局方式具有较为明显的优势，主要表现在以下几点。1．内容和表现相分离。2．对搜索引擎的支持更加友好。3．文件代码更加精简，执行速度更快。4．易于维护。但是DIV+CSS页面布局也存在一定的缺陷：1．DIV+CSS方式实现起来比较复杂，初学者不易掌握。2．DIV+CSS方式对于元素的控制太灵活，容易出错。3．DIV+CSS方式还没有解决浏览器的完全兼容。例如在IE浏览器上可以正常显示的页面，换作其它浏览器显示可能会面目全非。4．使用DIV+CSS布局网页的开发成本较高，开发周期较长。4.2盒子之间的关系CSS规范的思路是，首先确定一种标准的排版模式，以保证设置的简单化，各种网页元素构成的盒子按照这种标准的方式排列布局。---标准流4.2盒子之间的关系标准文档流简称标准流，就是指在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。1、块级元素（blocklevel）:总是以一个块的形式表现出来，且跟同级的兄弟块依次竖直排列，左右撑满。2、行内元素（inline）：各元素横向排列，到最右端自动折行。例：行内元素.html与块级元素.htmldiv标记与span标记div（division）标记简单而言是一个区块容器标记，即div与/div之间相当于一个容器，可以容纳段落、标题、表格、图片，乃至章节、摘要和备注等各种HTML元素。可以把div与/div中的内容视为一个独立的对象，用于CSS的控制。声明时只需要对div进行相应的控制，其中的各标记元素都会随之改变。例：div.htmldiv标记与span标记span标记与div标记一样，作为容器标记被广泛使用。与div标记的区别在于，div标记是一个块级元素，它包围的元素会自动换行。而span标记仅仅是一个行内元素，在它的前后不会换行。此外，span标记可以包含在div标记中，成为它的子元素，而反过来则不成立，即span标记不可以包含div标记。4.3页面布局一般的网页需要包括标志、站点名称、主页面内容、站点导航、子菜单、搜索区、功能区以及页脚等部分。每一部分可以使用一个div表示。各个div组成了整个网页的结构。每一个div都可以使用CSS的定位属性使其显示在页面的合适位置。4.3.1默认布局div的默认布局为垂直排列。每个div在默认情况下是块级元素，div前后会出现换行。layout1.html:!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8titleDIV的默认布局-垂直排列/titlestyletype=text/css#lay1{width:200px;height:30px;background-color:#90EE90;}#lay2{width:200px;height:30px;background-color:#FFFACD;}#lay3{width:200px;height:30px;background-color:#F08080;}/style/headbodydivid=lay1/divdivid=lay2/divdivid=lay3/div/body/htmllayout1.html在IE浏览器中的显示结果如图所示。4.3.2水平排列如果要div水平排列，只需要将div的float属性设置为left即可，例如layout2.html。layout2.html:!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8titleDIV的水平排列/titlestyletype=text/css#lay1{width:100px;height:30px;background-color:#90EE90;float:left;}#lay2{width:100px;height:30px;background-color:#FFFACD;float:left;}#lay3{width:100px;height:30px;background-color:#F08080;float:left;}/style/headbodydivid=lay1/divdivid=lay2/divdivid=lay3/div/body/html在IE浏览器中打开layout2.html，其显示结果如图所示。当浏览器窗口变小时，div会自动换行。4.3.3div的嵌套div之间可以互相嵌套，可以通过设置div的相关属性来确定各个div之间的位置，例如layout3.html，一个div中嵌套三个垂直排列的div。layout3.html:!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8titleDIV的嵌套/titlestyletype=text/css#container{width:300px;height:120px;background-color:#7B68EE;padding-top:10px;padding-right:20px;padding-bottom:10px;padding-left:20px;text-align:center;margin-left:auto;margin-right:auto;}#lay1{width:200px;height:30px;background-color:#90EE90;}#lay2{width:200px;height:30px;background-color:#FFFACD;}#lay3{width:200px;height:30px;background-color:#F08080;}/style/headbodydivid=containerdivid=lay1/divdivid=lay2/divdivid=lay3/div/div/body/html在IE浏览器中打开layout3.html，其显示结果如图所示。4.3.4div浮动当div的float属性取值为left或者right时，即成为浮动对象。div用于网页布局时，一般都是嵌套的。如果外层的div没有设定大小，而内层的div又是浮动的，浮动对象的物理位置会脱离文档流，因而对其父元素或者其后的元素的布局会产生影响，甚至会出现布局混乱的现象。div浮动没有设置浮动时的效果：01.HTMLdiv浮动设置第1个浮动的div：02.HTMLdiv浮动设置第2个浮动的div：03.HTMLdiv浮动设置第3个浮动的div：04.HTMLdiv浮动改变浮动的方向：05.HTMLdiv浮动再次改变浮动的方向：06.HTMLdiv浮动全部向左浮动，且第一个盒子中增加一行：06b.HTML实例layout4.html:!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8titleDIV的嵌套/titlestyletype=text/css#container{background-color:#7B68EE;text-align:center;margin-left:auto;margin-right:auto;padding:10px;}#lay1{width:30%;height:50px;background-color:#90EE90;float:left;}#lay2{width:60%;height:60px;background-color:#FFFACD;float:right;}/style/headbodydivid=containerdivid=lay1/divdivid=lay2/div/div/body/htmllayout4.html在IE浏览器中的显示结果如图所示。浮动的清除清除浮动可以消除浮动对象对其它元素的影响。一般可以采用四种方法来清除浮动，分别为使用空标签、使用overflow属性、使用after伪对象以及浮动外部元素。1．使用空标签使用空标签是最常用的清除浮动的方法，也是W3C推荐使用的方法。空标签可以采用块级元素，例如div、p以及br/等，在浮动元素之后添加一个空标签，并使其clear属性取值为both（或者除none之外的其它属性值）。layout4.html:!DOCTYPEhtmlPUBLIC-//W3C//DTDHTML4.01Transitional//EN=Content-Typecontent=text/html;charset=UTF-8title使用空标签消除浮动/titlestyletype=text/css#container{background-color:#7B68EE;text-align:center;margin-left:auto;margin-right:auto;padding:10px;}#lay1{width:30%;height:50px;background-color:#90EE90;float