DIVCSS布局基础.ppt

《DIVCSS布局基础.ppt》由会员分享，可在线阅读，更多相关《DIVCSS布局基础.ppt（34页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、第第1414章章 DIV+CSS DIV+CSS布局基础布局基础在对在对CSS技术的基础知识有了一定的掌握后就可以开技术的基础知识有了一定的掌握后就可以开始始学习学习DIV+CSS的布局的方法。的布局的方法。DIV+CSS的布局方法简单来的布局方法简单来说就是使用说就是使用div标签作为容器，使用标签作为容器，使用CSS技术来排布技术来排布div标标签签的布局方法。常用的的布局方法。常用的CSS布局方式有浮动、定位等。布局方式有浮动、定位等。本章是学习本章是学习CSS技术最重要的一个部分，读者应多实技术最重要的一个部分，读者应多实践践本章内各个实例。本章内各个实例。本章内容包括：本章内容包括：

2、了解了解DIV+CSS布局的流程布局的流程学习盒模型以及盒模型的基本元素学习盒模型以及盒模型的基本元素学习页面元素的布局方式学习页面元素的布局方式实例制作歌曲专辑列表实例制作歌曲专辑列表实例制作给图片加入信息实例制作给图片加入信息14.1 14.1 初识初识DIV+CSSDIV+CSS布局的流程布局的流程本节通过分析一本节通过分析一个企业主页的排个企业主页的排布方式来讲解初布方式来讲解初步了解步了解DIV+CSS布局的方法。该布局的方法。该网页的效果图显网页的效果图显示如图所示。示如图所示。14.2 14.2 了解盒模型了解盒模型盒模型是盒模型是DIV+CSS布局的基础，要实现布局的基础，要实

3、现DIV+CSS布局布局必需了解盒模型的原理。在页面上的每个元素都能看做一必需了解盒模型的原理。在页面上的每个元素都能看做一个个容器，这个容器就是一个盒子。例如，容器，这个容器就是一个盒子。例如，p标签是一个能装文标签是一个能装文字的容器，它的高度就是所承载文字的高度。使用字的容器，它的高度就是所承载文字的高度。使用DIV+CSS布局，布局，div标签就是布局中所用到的容器。大部标签就是布局中所用到的容器。大部分分人认为只有人认为只有div标签能作为容器来安排布局。其实在标签能作为容器来安排布局。其实在XHTML页面中几乎所用的标签都是容器，都能被当作容器来使用。页面中几乎所用的标签都是容器，

4、都能被当作容器来使用。页面上的每个容器都占有一定的位置，有一定的大小。页页面上的每个容器都占有一定的位置，有一定的大小。页面面上的每个容器都会影响其他容器的排布，它们相互作用，上的每个容器都会影响其他容器的排布，它们相互作用，而而形成一个页面的布局。形成一个页面的布局。14.2.1 div14.2.1 div标签的盒模型例子标签的盒模型例子以下以以下以div标签的盒模型为例子，讲述基本盒模型的基标签的盒模型为例子，讲述基本盒模型的基本概念。【示例】本例子讲述基本盒模型的概念。本概念。【示例】本例子讲述基本盒模型的概念。14.2.2 14.2.2 基本盒模型基本盒模型下图所示为基本盒模型。在页面

5、中的所有元素都遵下图所示为基本盒模型。在页面中的所有元素都遵循该模型的设置方式。循该模型的设置方式。14.2.3 14.2.3 边距边距边距用于设置页面元素与其它元素的距离。边距用于设置页面元素与其它元素的距离。CSS的的margin属性用于设置边距距离。属性用于设置边距距离。1用长度单位设定用长度单位设定margin的值的值 例例14-32用百分比设定用百分比设定margin的值的值 例例14-43边距值的缩写边距值的缩写:如果提供全部四个参数值，将按上右下左的顺如果提供全部四个参数值，将按上右下左的顺序作用于四边。序作用于四边。如果只提供一个，将用于全部的四边。如果只提供一个，将用于全部的

6、四边。如果提供两个，第一个用于上下，第二个用于左如果提供两个，第一个用于上下，第二个用于左右。右。如果提供三个，第一个用于上，第二个用于左右，如果提供三个，第一个用于上，第二个用于左右，第三个用于下。第三个用于下。例例14-54单边距值：单边距值：margin-top、margin-right、margin-bottom、margin-left 5边距重叠边距重叠 例例14-6 注：注：在边距重叠时，会淘汰边距较小的一个。边距重叠在边距重叠时，会淘汰边距较小的一个。边距重叠只发生在边距属性中，补白和边框都不会出现重叠现象。只发生在边距属性中，补白和边框都不会出现重叠现象。14.2.4 14.2

7、.4 补白补白补白用于增加页面元素边框与内容之间的空间。补白用于增加页面元素边框与内容之间的空间。CSS的的padding属性用于设置补白。属性用于设置补白。1用长度单位设定用长度单位设定padding的值的值 例例14-72用百分比设定用百分比设定padding的值，其计算标准是以该元素的父元的值，其计算标准是以该元素的父元素宽高为基准。素宽高为基准。例例14-83.补白值的缩写：补白值的缩写：如果提供全部四个参数值，将按上右下左的顺序如果提供全部四个参数值，将按上右下左的顺序作用于四边。作用于四边。如果只提供一个，将用于全部的四条边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个

8、用于上下，第二个用于左右。如果提供两个，第一个用于上下，第二个用于左右。如果提供三个，第一个用于上，第二个用于左右，第如果提供三个，第一个用于上，第二个用于左右，第三个用三个用于下。于下。4.单补白值：单补白值：padding-top、padding-right、padding-bottom、padding-left 14.2.5 14.2.5 边框边框边框是页面元素可视范围的最外圈。边框包围的范围包边框是页面元素可视范围的最外圈。边框包围的范围包括页面元素的补白和内容。括页面元素的补白和内容。CSS中提供以下三个设置边框的中提供以下三个设置边框的属性：属性：1边框样式边框样式border-s

9、tyle 参数：参数：none:无边框。与任何指定的无边框。与任何指定的border-width值无关值无关 hidden:隐藏边框。隐藏边框。IE不支持不支持 dotted:在在MAC平台上平台上IE4+与与WINDOWS和和UNIX平台上平台上IE5.5+为点线。否则为实线为点线。否则为实线 dashed:在在MAC平台上平台上IE4+与与WINDOWS和和UNIX平台上平台上IE5.5+为虚线。否则为实线为虚线。否则为实线 solid:实线边框实线边框 double:双线边框。两条单线与其间隔的和等于指定的双线边框。两条单线与其间隔的和等于指定的border-width值值 groove

10、:根据根据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，在设定边框宽度之前，必须，在设定边框宽度之前，必须先指定边框的样式。先指定边框的样式

11、。参数：参数：medium:默认宽度默认宽度thin:小于默认宽度小于默认宽度thick:大于默认宽度大于默认宽度length:由浮点数字和单位标识符组成的长度值。不由浮点数字和单位标识符组成的长度值。不可为负值。可为负值。例例14-10border-top-width、border-right-width、border-bottom-width、border-left-width 3边框颜色边框颜色border-color 也包括也包括border-top-color、border-right-color、border-bottom-color、border-left-color 4边框缩写

12、边框缩写14.3 14.3 页面元素的布局页面元素的布局在了解基本盒模型后，就要开始进入页面元素布局的在了解基本盒模型后，就要开始进入页面元素布局的学学习。这一节是学习习。这一节是学习DIV+CSS布局方式最重要的一节，内容布局方式最重要的一节，内容对初学者而言比较深。但是只要细心理解每个讲解实例就对初学者而言比较深。但是只要细心理解每个讲解实例就能能深入了解页面元素布局的基本原则。页面元素布局的核心深入了解页面元素布局的基本原则。页面元素布局的核心是是定位和浮动的基本原理以及块级元素与行内元素的区别。定位和浮动的基本原理以及块级元素与行内元素的区别。掌掌握了本小节后就能对握了本小节后就能对D

13、IV+CSS布局的原理有相当清晰的理布局的原理有相当清晰的理解。解。14.3.1 14.3.1 块级元素与行内元素块级元素与行内元素所有的所有的XHTML页面元素只页面元素只有两种，一是块级元素，一是有两种，一是块级元素，一是行内元素。表中列出了行内元素。表中列出了XHTML中常见的块级元素和行内元素。中常见的块级元素和行内元素。块级元素行内元素blockquteadirbdivspanfieldsetciteformemh1-h6ihrimgdlinputollabelulselectpbrprestrongtextarea块级元素和行内元素的区别块级元素和行内元素的区别排列方式可控制属性宽

14、度块级元素垂直排列高度、行高以及上下边距都可控制其宽度默认情况下与其父元素一致。可以设置width属性改变其宽度。行内元素水平排列高度及上下边距都不可控制宽度就是其包含的文字或者图片的宽度，设置width属性不生效。在默认情况下，块级元素在页面中垂直排列，行内元素在页在默认情况下，块级元素在页面中垂直排列，行内元素在页面中水平排列。块级元素一般用作其它页面元素的容器，块级元面中水平排列。块级元素一般用作其它页面元素的容器，块级元素一般都从新行开始，它可以容纳块级元素和行内元素。行内元素一般都从新行开始，它可以容纳块级元素和行内元素。行内元素只能容纳文本或者其它行内元素。使用素只能容纳文本或者其

15、它行内元素。使用CSS的的display属性中的属性中的block和和inline值，分别代表块级元素和行内元素。值，分别代表块级元素和行内元素。例例14-1114.3.2 CSS14.3.2 CSS布局方式：常规流布局方式：常规流CSS有三种基本的布局方式，分别是常规流、浮动和有三种基本的布局方式，分别是常规流、浮动和定定位。所谓常规流（位。所谓常规流（normal flow）是指页面元素按照所在）是指页面元素按照所在XHTML文档的位置顺序排列的布局方式。在没有添加其他文档的位置顺序排列的布局方式。在没有添加其他布局方式的情况下，页面遵循常规流的布局方式。布局方式的情况下，页面遵循常规流的

16、布局方式。14.4 CSS14.4 CSS布局方式：浮动布局方式：浮动使用浮动布局是目前网页制作中最为常用的方式。应使用浮动布局是目前网页制作中最为常用的方式。应用用了浮动的元素全部都会成为块级元素，并且脱离原来的常了浮动的元素全部都会成为块级元素，并且脱离原来的常规规流模式。应用了浮动的元素可以向页面的左边或者右边移流模式。应用了浮动的元素可以向页面的左边或者右边移动动，直到其边缘接触到其父元素的边框或者另外一个浮动元，直到其边缘接触到其父元素的边框或者另外一个浮动元素素的边框。的边框。CSS提供提供float属性用于设置元素的浮动，它包含三个属性用于设置元素的浮动，它包含三个值，分别是值，

17、分别是left、right和和none。设置浮动为。设置浮动为left值，元素向值，元素向页面左边浮动；设置浮动为页面左边浮动；设置浮动为right，元素向页面右边浮动；，元素向页面右边浮动；设置浮动为设置浮动为none，元素不浮动。，元素不浮动。14.4.1 14.4.1 两个元素的浮动应用两个元素的浮动应用在页面布局中，很多时在页面布局中，很多时候候会使用两个元素的浮动会使用两个元素的浮动应应用。例如，页面为两分用。例如，页面为两分栏栏的结构、图文混排都应的结构、图文混排都应用用了两个元素的浮动。在了两个元素的浮动。在示示例中讲解两个子元素的例中讲解两个子元素的浮浮动应用。动应用。例例14

18、-12技巧：技巧：IE6解释元素的边解释元素的边距距值的一个缺陷。解决的值的一个缺陷。解决的方方法是把第一个法是把第一个div的的Display属性设置属性设置inline14.4.2 14.4.2 多个元素的浮动应用多个元素的浮动应用在页面布局中，多在页面布局中，多个元素的浮动常用个元素的浮动常用于相册排版、列表于相册排版、列表排版等。【示例】排版等。【示例】本例子有四个本例子有四个div标标签，其中一个命名签，其中一个命名为为“father”的的div标标签是父元素，其余签是父元素，其余三个元素是子元素三个元素是子元素。例例14-1314.4.3 14.4.3 清除浮动清除浮动使用浮动后，

19、常产生很多意外的结果，因为浮动的元使用浮动后，常产生很多意外的结果，因为浮动的元素素会脱离原来的常规流。浮动元素可能会覆盖一些非浮动的会脱离原来的常规流。浮动元素可能会覆盖一些非浮动的元元素，这时需要使用素，这时需要使用CSS的的clear属性来清除浮动。属性来清除浮动。clear属属性性有四个值，分别是有四个值，分别是none、left、right和和both，以下是四个，以下是四个值的意义。值的意义。例例14-14none：允许两边都可以有浮动对象；：允许两边都可以有浮动对象；both：不允许有浮动对象；：不允许有浮动对象；left：不允许左边有浮动对象；：不允许左边有浮动对象；right

20、：不允许右边有浮动对象。：不允许右边有浮动对象。14.4.4 14.4.4 解决火狐的计算高度问题解决火狐的计算高度问题在一个在一个XHTML文档中，父元素文档中，父元素“father”的宽度是固定的，的宽度是固定的，但但是高度不固定。其子元素若使用了浮动，那么父元素的高度就不是高度不固定。其子元素若使用了浮动，那么父元素的高度就不会自动计算。也就是说，子元素不能撑开父元素。但是在会自动计算。也就是说，子元素不能撑开父元素。但是在IE中，中，父元素的高度是自动计算的，子元素能撑开父元素。父元素的高度是自动计算的，子元素能撑开父元素。处理方法：添加第三个元素，给其指定一个名为处理方法：添加第三个

21、元素，给其指定一个名为clear的类选择的类选择器，设定器，设定clear属性为属性为both。例例14-1514.5 CSS14.5 CSS布局方式：相对定位布局方式：相对定位除了使用浮动布局外，常用的布局方式还有定位。除了使用浮动布局外，常用的布局方式还有定位。CSS提供提供position属性用于定位。使用属性用于定位。使用position定位可以定义定位可以定义元元素相对其父元素或者其他元素的精确位置。素相对其父元素或者其他元素的精确位置。Position属性属性共共有四个关键字值，分别是有四个关键字值，分别是static、absolute、relative和和fixed。其中其中st

22、atic为默认值，表示块保持在原来的位置上。为默认值，表示块保持在原来的位置上。absolute代表绝对定位，代表绝对定位，relative代表相对定位，这两种定代表相对定位，这两种定位方式是最常用的。本小节先讲述相对定位。位方式是最常用的。本小节先讲述相对定位。14.5.1 14.5.1 单个元素的相对定位单个元素的相对定位使用相对定位，就是子元素相对于自身偏移的位置。使用相对定位，就是子元素相对于自身偏移的位置。要要确定子元素相对于自身偏移了多少，就要使用确定子元素相对于自身偏移了多少，就要使用top、bottom、left和和right属性来确定。这四个属性能使用长度单位或属性来确定。这

23、四个属性能使用长度单位或者者关键字关键字auto来设置。例如设定子元素的来设置。例如设定子元素的position属性为属性为relative，然后设置，然后设置top为为10像素，则子元素会相对于自身像素，则子元素会相对于自身的顶部边界下移的顶部边界下移10像素。像素。例例14-16技巧：当技巧：当top、bottom、right、left同时设置时，子元素优同时设置时，子元素优先选择先选择top和和left。子元素宽度大于父元素宽度子元素宽度大于父元素宽度 例例14-1714.5.2 14.5.2 两个元素的相对定位两个元素的相对定位当子元素增加到两个的当子元素增加到两个的时时候，使用相对定

24、位的情候，使用相对定位的情况况就变得较为复杂。【示就变得较为复杂。【示例例】本例子有三个】本例子有三个div标签标签，其中一个命名为，其中一个命名为“father”的的div标签是标签是父元父元素，另外两个个元素是素，另外两个个元素是子子元素。设置第一个子元元素。设置第一个子元素素的的position属性为属性为relative，top属性为属性为10像像素。素。例例14-1814.6 CSS14.6 CSS布局方式：绝对定位布局方式：绝对定位使用绝对定位的子元素，其移动是相对于已经定位的使用绝对定位的子元素，其移动是相对于已经定位的父父元素。若其父元素并未定位，那么使用绝对定位的子元素元素。

25、若其父元素并未定位，那么使用绝对定位的子元素就就会相对最初的包含块来定位。通常这个最初的包含块是会相对最初的包含块来定位。通常这个最初的包含块是html标签。标签。14.6.1 14.6.1 单个元素的绝对定位单个元素的绝对定位使用绝对定位同样有使用绝对定位同样有top、bottom、left和和right四个用四个用于移动的属性。示例于移动的属性。示例14-18示范了父元素没有定位的情况。示范了父元素没有定位的情况。【示例】本例子有两个【示例】本例子有两个div标签，其中一个命名为标签，其中一个命名为“father”的的div标签是父元素，另外一个元素是子元素。设置子元素标签是父元素，另外一

26、个元素是子元素。设置子元素的的position属性为属性为absolute，top属性为属性为5像素。像素。例例14-19把父元素的把父元素的position属性改为属性改为relative 技巧：在实际运用中，定义父元素为相对定位，定义子元技巧：在实际运用中，定义父元素为相对定位，定义子元素为绝对定位，是常用的定位方式。素为绝对定位，是常用的定位方式。14.6.2 14.6.2 两个元素的绝对定位两个元素的绝对定位当子元素增加到当子元素增加到两两个的时候，使用个的时候，使用绝绝对定位的情况就对定位的情况就变变得较为复杂。使得较为复杂。使用用绝对定位的元素绝对定位的元素会会脱离原来的常规脱离原

27、来的常规流流，位置停留在父，位置停留在父元元素的左上角。素的左上角。例例14-2014.7 14.7 本章实例一：制作歌曲专辑列表本章实例一：制作歌曲专辑列表本章示例一就介绍本章示例一就介绍了了如何使用浮动来布如何使用浮动来布局局一个图文混排的歌一个图文混排的歌曲曲专辑列表。这种混专辑列表。这种混排排的方式同样适用于的方式同样适用于其其他图文混排的信息他图文混排的信息列列表中。本实例主要表中。本实例主要应应用定义列表作为容用定义列表作为容器器来设置歌曲专辑列来设置歌曲专辑列表表。本实例最终效果。本实例最终效果如如图所示。图所示。步骤：步骤：1.新建一个文件夹名为新建一个文件夹名为chapter

28、14(实例一实例一)，在该文件夹中，在该文件夹中新建一个标准新建一个标准XHTML文档，命名为文档，命名为index.html。然后再。然后再新建一个新建一个images文件夹，用于存放图片。使用定义列表文件夹，用于存放图片。使用定义列表嵌入专辑。实例中有四个专辑，所以整个嵌入专辑。实例中有四个专辑，所以整个XHTML文档中文档中插入四个插入四个dl标签。由于四个专辑的样式排布是一致的，标签。由于四个专辑的样式排布是一致的，所以只要制作其中一个专辑，其余复制即可。定义列表所以只要制作其中一个专辑，其余复制即可。定义列表包括三个标签，包括三个标签，dl、dt、dd。在本实例中，。在本实例中，dl

29、标签用于标签用于嵌入整个专辑，嵌入整个专辑，dt标签用于嵌入专辑图片，标签用于嵌入专辑图片，dd标签用于标签用于嵌入专辑介绍。全部专辑都放入一个名为嵌入专辑介绍。全部专辑都放入一个名为block的的div 标标签中。签中。2.把把dt标签设置为左浮动，标签设置为左浮动，dt标签就会与标签就会与dd标签水平排列。标签水平排列。3.要使要使dt标签中图片居中对齐，还要设置其显示属性为标签中图片居中对齐，还要设置其显示属性为block。4.设置设置dd标签中标签中span标签中文字的样式和超链接的样式。标签中文字的样式和超链接的样式。由于由于span标签属于行内元素，要实现标签属于行内元素，要实现s

30、pan标签的分行，标签的分行，就要将就要将span标签转换为块级元素。标签转换为块级元素。5.将将dl标签中的所有内容复制三份，然后换上相应的内容。标签中的所有内容复制三份，然后换上相应的内容。当四个当四个block容器放在一起，就会因为浮动而产生布局容器放在一起，就会因为浮动而产生布局混乱，为了清除浮动，在每个混乱，为了清除浮动，在每个dd标签中加入标签中加入clear容器。容器。14.8 14.8 本章实例二：给图片加入信息本章实例二：给图片加入信息在许多电影网站或者个人网站的图片上都带有一行文字信息在许多电影网站或者个人网站的图片上都带有一行文字信息。若在图片本书加入文字，那么修改起来会

31、很麻烦，每次要修改。若在图片本书加入文字，那么修改起来会很麻烦，每次要修改文字都要更改图片。本章实例二应用了定位的布局方式来给图片文字都要更改图片。本章实例二应用了定位的布局方式来给图片加入可改动的信息。本实例最终效果如图所示。加入可改动的信息。本实例最终效果如图所示。步骤：步骤：1.新建一个文件夹名为新建一个文件夹名为chapter14(实例二实例二)，在该文件夹中，在该文件夹中新建一个标准新建一个标准XHTML文档，命名为文档，命名为index.html。然后再。然后再新建一个新建一个images文件夹，用于存放图片。本例有六章图文件夹，用于存放图片。本例有六章图片，每张样式一样，所以先设

32、置第一张图片的样式。使片，每张样式一样，所以先设置第一张图片的样式。使用用block容器作为一张图片的父容器，在该容器中有两容器作为一张图片的父容器，在该容器中有两个个div标签作为其子元素。名为标签作为其子元素。名为picture的子元素用于放的子元素用于放置图片，名为置图片，名为descript的子元素用于放置图片信息。设的子元素用于放置图片信息。设置父元素置父元素block的样式，要使父元素的大小和图片大小的样式，要使父元素的大小和图片大小一致。一致。2.设置父元素为相对定位，子元素设置父元素为相对定位，子元素descript为绝对定位。为绝对定位。为了使图片信息位于图片的右下角，要设置

33、为了使图片信息位于图片的右下角，要设置bottom属性属性和和right属性的值为属性的值为5px。3.设置好第一张图片后，就可以复制另外五张图片。在执设置好第一张图片后，就可以复制另外五张图片。在执行该步骤后，图片会垂直排列。要使其沿水平方向排列，行该步骤后，图片会垂直排列。要使其沿水平方向排列，就要设置就要设置block容器的浮动属性为容器的浮动属性为left。为了消除浮动产。为了消除浮动产生生IE6的双倍边距，要设置显示属性为的双倍边距，要设置显示属性为inline。14.9 14.9 常见面试题常见面试题问题问题1：使用：使用float属性进行页面布局时，为何总是在不同的属性进行页面布

34、局时，为何总是在不同的浏览器下表现不同？浏览器下表现不同？问题问题2：为何设置元素为绝对定位时，元素总是出现在页面：为何设置元素为绝对定位时，元素总是出现在页面的左上角，而不是父元素的左上角？的左上角，而不是父元素的左上角？问题问题3：使用：使用clear属性有何作用？属性有何作用？14.10 14.10 小结小结本章讲解了本章讲解了DIV+CSS布局的基础。布局的基础。本章介绍了基本盒模型以及边框、补白和边距的概念。本章介绍了基本盒模型以及边框、补白和边距的概念。本章的重点是在本章的重点是在DIV+CSS的基本布局流程和页面元素的布的基本布局流程和页面元素的布局，包括常规流、浮动和定位。局，包括常规流、浮动和定位。本章的难点是了解行内元素和块级元素的区别以及以及相本章的难点是了解行内元素和块级元素的区别以及以及相互转化的方法。互转化的方法。在本章的最开始简单地介绍了在本章的最开始简单地介绍了DIV+CSS的布局流程，在下的布局流程，在下一章将会详细讲解如何使用一章将会详细讲解如何使用DIV+CSS进行页面布局。进行页面布局。