第14章DIVCSS布局基础

第14章DIV+CSS布局基础在对CSS技术的基础知识有了一定的掌握后就可以开始学习DIV+CSS的布局的方法。DIV+CSS的布局方法简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法。常用的CSS布局方式有浮动、定位等。本章是学习CSS技术最重要的一个部分，读者应多实践本章内各个实例。本章内容包括：了解DIV+CSS布局的流程学习盒模型以及盒模型的基本元素学习页面元素的布局方式实例制作歌曲专辑列表实例制作给图片加入信息14.1初识DIV+CSS布局的流程本节通过分析一个企业主页的排布方式来讲解初步了解DIV+CSS布局的方法。该网页的效果图显示如图所示。14.2了解盒模型盒模型是DIV+CSS布局的基础，要实现DIV+CSS布局必需了解盒模型的原理。在页面上的每个元素都能看做一个容器，这个容器就是一个盒子。例如，p标签是一个能装文字的容器，它的高度就是所承载文字的高度。使用DIV+CSS布局，div标签就是布局中所用到的容器。大部分人认为只有div标签能作为容器来安排布局。其实在XHTML页面中几乎所用的标签都是容器，都能被当作容器来使用。页面上的每个容器都占有一定的位置，有一定的大小。页面上的每个容器都会影响其他容器的排布，它们相互作用，而形成一个页面的布局。14.2.1div标签的盒模型例子以下以div标签的盒模型为例子，讲述基本盒模型的基本概念。【示例】本例子讲述基本盒模型的概念。14.2.2基本盒模型下图所示为基本盒模型。在页面中的所有元素都遵循该模型的设置方式。14.2.3边距边距用于设置页面元素与其它元素的距离。CSS的margin属性用于设置边距距离。1．用长度单位设定margin的值例14-32．用百分比设定margin的值例14-43．边距值的缩写:如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。例14-54．单边距值：margin-top、margin-right、margin-bottom、margin-left5．边距重叠例14-6注：在边距重叠时，会淘汰边距较小的一个。边距重叠只发生在边距属性中，补白和边框都不会出现重叠现象。14.2.4补白补白用于增加页面元素边框与内容之间的空间。CSS的padding属性用于设置补白。1．用长度单位设定padding的值例14-72．用百分比设定padding的值，其计算标准是以该元素的父元素宽高为基准。例14-83.补白值的缩写：如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。4.单补白值：padding-top、padding-right、padding-bottom、padding-left14.2.5边框边框是页面元素可视范围的最外圈。边框包围的范围包括页面元素的补白和内容。CSS中提供以下三个设置边框的属性：1．边框样式border-style参数：none:无边框。与任何指定的border-width值无关hidden:隐藏边框。IE不支持dotted:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线dashed:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线solid:实线边框double:双线边框。两条单线与其间隔的和等于指定的border-width值groove:根据border-color的值画3D凹槽ridge:根据border-color的值画菱形边框inset:根据border-color的值画3D凹边outset:根据border-color的值画3D凸边border-style也包括border-top-style、border-right-style、border-bottom-style、border-left-style例14-92．边框宽度border-width，在设定边框宽度之前，必须先指定边框的样式。参数：medium:默认宽度thin:小于默认宽度thick:大于默认宽度length:由浮点数字和单位标识符组成的长度值。不可为负值。例14-10border-top-width、border-right-width、border-bottom-width、border-left-width3．边框颜色border-color也包括border-top-color、border-right-color、border-bottom-color、border-left-color4．边框缩写14.3页面元素的布局在了解基本盒模型后，就要开始进入页面元素布局的学习。这一节是学习DIV+CSS布局方式最重要的一节，内容对初学者而言比较深。但是只要细心理解每个讲解实例就能深入了解页面元素布局的基本原则。页面元素布局的核心是定位和浮动的基本原理以及块级元素与行内元素的区别。掌握了本小节后就能对DIV+CSS布局的原理有相当清晰的理解。14.3.1块级元素与行内元素所有的XHTML页面元素只有两种，一是块级元素，一是行内元素。表中列出了XHTML中常见的块级元素和行内元素。块级元素行内元素blockquteadirbdivspanfieldsetciteformemh1-h6ihrimgdlinputollabelulselectpbrprestrongtextarea块级元素和行内元素的区别排列方式可控制属性宽度块级元素垂直排列高度、行高以及上下边距都可控制其宽度默认情况下与其父元素一致。可以设置width属性改变其宽度。行内元素水平排列高度及上下边距都不可控制宽度就是其包含的文字或者图片的宽度，设置width属性不生效。在默认情况下，块级元素在页面中垂直排列，行内元素在页面中水平排列。块级元素一般用作其它页面元素的容器，块级元素一般都从新行开始，它可以容纳块级元素和行内元素。行内元素只能容纳文本或者其它行内元素。使用CSS的display属性中的block和inline值，分别代表块级元素和行内元素。例14-1114.3.2CSS布局方式：常规流CSS有三种基本的布局方式，分别是常规流、浮动和定位。所谓常规流（normalflow）是指页面元素按照所在XHTML文档的位置顺序排列的布局方式。在没有添加其他布局方式的情况下，页面遵循常规流的布局方式。14.4CSS布局方式：浮动使用浮动布局是目前网页制作中最为常用的方式。应用了浮动的元素全部都会成为块级元素，并且脱离原来的常规流模式。应用了浮动的元素可以向页面的左边或者右边移动，直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框。CSS提供float属性用于设置元素的浮动，它包含三个值，分别是left、right和none。设置浮动为left值，元素向页面左边浮动；设置浮动为right，元素向页面右边浮动；设置浮动为none，元素不浮动。14.4.1两个元素的浮动应用在页面布局中，很多时候会使用两个元素的浮动应用。例如，页面为两分栏的结构、图文混排都应用了两个元素的浮动。在示例中讲解两个子元素的浮动应用。例14-12技巧：IE6解释元素的边距值的一个缺陷。解决的方法是把第一个div的Display属性设置inline14.4.2多个元素的浮动应用在页面布局中，多个元素的浮动常用于相册排版、列表排版等。【示例】本例子有四个div标签，其中一个命名为“father”的div标签是父元素，其余三个元素是子元素。例14-1314.4.3清除浮动使用浮动后，常产生很多意外的结果，因为浮动的元素会脱离原来的常规流。浮动元素可能会覆盖一些非浮动的元素，这时需要使用CSS的clear属性来清除浮动。clear属性有四个值，分别是none、left、right和both，以下是四个值的意义。例14-14none：允许两边都可以有浮动对象；both：不允许有浮动对象；left：不允许左边有浮动对象；right：不允许右边有浮动对象。14.4.4解决火狐的计算高度问题在一个XHTML文档中，父元素“father”的宽度是固定的，但是高度不固定。其子元素若使用了浮动，那么父元素的高度就不会自动计算。也就是说，子元素不能撑开父元素。但是在IE中，父元素的高度是自动计算的，子元素能撑开父元素。处理方法：添加第三个元素，给其指定一个名为clear的类选择器，设定clear属性为both。例14-1514.5CSS布局方式：相对定位除了使用浮动布局外，常用的布局方式还有定位。CSS提供position属性用于定位。使用position定位可以定义元素相对其父元素或者其他元素的精确位置。Position属性共有四个关键字值，分别是static、absolute、relative和fixed。其中static为默认值，表示块保持在原来的位置上。absolute代表绝对定位，relative代表相对定位，这两种定位方式是最常用的。本小节先讲述相对定位。14.5.1单个元素的相对定位使用相对定位，就是子元素相对于自身偏移的位置。要确定子元素相对于自身偏移了多少，就要使用top、bottom、left和right属性来确定。这四个属性能使用长度单位或者关键字auto来设置。例如设定子元素的position属性为relative，然后设置top为10像素，则子元素会相对于自身的顶部边界下移10像素。例14-16技巧：当top、bottom、right、left同时设置时，子元素优先选择top和left。子元素宽度大于父元素宽度例14-1714.5.2两个元素的相对定位当子元素增加到两个的时候，使用相对定位的情况就变得较为复杂。【示例】本例子有三个div标签，其中一个命名为“father”的div标签是父元素，另外两个个元素是子元素。设置第一个子元素的position属性为relative，top属性为10像素。例14-1814.6CSS布局方式：绝对定位使用绝对定位的子元素，其移动是相对于已经定位的父元素。若其父元素并未定位，那么使用绝对定位的子元素就会相对最初的包含块来定位。通常这个最初的包含块是html标签。14.6.1单个元素的绝对定位使用绝对定位同样有top、bottom、left和right四个用于移动的属性。示例14-18示范了父元素没有定位的情况。【示例】本例子有两个div标签，其中一个命名为“father”的div标签是父元素，另外一个元素是子元素。设置子元素的position属性为absolute，top属性为5像素。例14-19把父元素的position属性改为relative技巧：在实际运用中，定义父元素为相对定位，定义子元素为绝对定位，是常用的定位方式。14.6.2两个元素的绝对定位当子元素增加到两个的时候，使用绝对定位的情况就变得较为复杂。使用绝对定位的元素会脱离原来的常规流，位置停留在父元素的左上角。例14-2014.7本章实例一：制作歌曲专辑列表本章示例一就介绍了如何使用浮动来布局一个图文混排的歌曲专辑列表。这种混排的方式同样适用于其他图文混排的信息列表中。本实例主要应用定义列表作为容器来设置歌曲专辑列表。本实例最终效果如图所示。步骤：1.新建一个文件夹名为chapter14(实例一)，在该文件夹中新建一个标准XHTML文档，命名为index.html。然后再新建一个images文件夹，用于存放图片。使用定义列表嵌入专辑。实例中有四个专辑，所以整个XHTML文档中插入四个dl标签。由于四个专辑的样式排布是一致的，所以只要制作其中一个专辑，其余复制即可。定义列表包括三个标签，dl、dt、dd。在本实例中，dl标签用于嵌入整个专辑，dt标签用于嵌入专辑图片，dd标签用