第14章DIVCSS布局基础.ppt
第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.1 div标签的盒模型例子,以下以div标签的盒模型为例子，讲述基本盒模型的基 本概念。【示例】本例子讲述基本盒模型的概念。,14.2.2 基本盒模型,下图所示为基本盒模型。在页面中的所有元素都遵 循该模型的设置方式。,14.2.3 边距,边距用于设置页面元素与其它元素的距离。CSS的 margin属性用于设置边距距离。 1用长度单位设定margin的值 例14-3 2用百分比设定margin的值 例14-4 3边距值的缩写: 如果提供全部四个参数值，将按上右下左的顺 序作用于四边。 如果只提供一个，将用于全部的四边。 如果提供两个，第一个用于上下，第二个用于左 右。 如果提供三个，第一个用于上，第二个用于左右， 第三个用于下。例14-5,4单边距值：margin-top 、margin-right 、margin-bottom 、margin-left 5边距重叠 例14-6 注：在边距重叠时，会淘汰边距较小的一个。边距重叠 只发生在边距属性中，补白和边框都不会出现重叠现象。,14.2.4 补白,补白用于增加页面元素边框与内容之间的空间。CSS的 padding属性用于设置补白。 1用长度单位设定padding的值 例14-7 2用百分比设定padding的值，其计算标准是以该元素的父元素宽高为基准。 例14-8,3.补白值的缩写： 如果提供全部四个参数值，将按上右下左的顺序 作用于四边。 如果只提供一个，将用于全部的四条边。 如果提供两个，第一个用于上下，第二个用于左右。 如果提供三个，第一个用于上，第二个用于左右，第三个用 于下。 4.单补白值：padding-top 、padding-right 、padding-bottom 、padding-left,14.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-9 2边框宽度border-width ，在设定边框宽度之前，必须先指定边框的样式。 参数： medium : 默认宽度 thin : 小于默认宽度 thick : 大于默认宽度 length : 由浮点数字和单位标识符组成的长度值。不可为负值。 例14-10 border-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边框缩写,14.3 页面元素的布局,在了解基本盒模型后，就要开始进入页面元素布局的学 习。这一节是学习DIV+CSS布局方式最重要的一节，内容 对初学者而言比较深。但是只要细心理解每个讲解实例就能 深入了解页面元素布局的基本原则。页面元素布局的核心是 定位和浮动的基本原理以及块级元素与行内元素的区别。掌 握了本小节后就能对DIV+CSS布局的原理有相当清晰的理 解。,14.3.1 块级元素与行内元素,所有的XHTML页面元素只有两种，一是块级元素，一是行内元素。表中列出了XHTML中常见的块级元素和行内元素。,块级元素和行内元素的区别,在默认情况下，块级元素在页面中垂直排列，行内元素在页面中水平排列。块级元素一般用作其它页面元素的容器，块级元素一般都从新行开始，它可以容纳块级元素和行内元素。行内元素只能容纳文本或者其它行内元素。使用CSS的display属性中的block和inline值，分别代表块级元素和行内元素。 例14-11,14.3.2 CSS布局方式：常规流,CSS有三种基本的布局方式，分别是常规流、浮动和定 位。所谓常规流（normal flow）是指页面元素按照所在 XHTML文档的位置顺序排列的布局方式。在没有添加其他 布局方式的情况下，页面遵循常规流的布局方式。,14.4 CSS布局方式：浮动,使用浮动布局是目前网页制作中最为常用的方式。应用 了浮动的元素全部都会成为块级元素，并且脱离原来的常规 流模式。应用了浮动的元素可以向页面的左边或者右边移动 ，直到其边缘接触到其父元素的边框或者另外一个浮动元素 的边框。 CSS提供float属性用于设置元素的浮动，它包含三个 值，分别是left、right和none。设置浮动为left值，元素向 页面左边浮动；设置浮动为right，元素向页面右边浮动； 设置浮动为none，元素不浮动。,14.4.1 两个元素的浮动应用,在页面布局中，很多时候 会使用两个元素的浮动应 用。例如，页面为两分栏 的结构、图文混排都应用 了两个元素的浮动。在示 例中讲解两个子元素的浮 动应用。 例14-12 技巧：IE6解释元素的边距 值的一个缺陷。解决的方 法是把第一个div的 Display属性设置inline,14.4.2 多个元素的浮动应用,在页面布局中，多 个元素的浮动常用 于相册排版、列表 排版等。【示例】 本例子有四个div标 签，其中一个命名 为“father”的div标 签是父元素，其余 三个元素是子元素 。 例14-13,14.4.3 清除浮动,使用浮动后，常产生很多意外的结果，因为浮动的元素 会脱离原来的常规流。浮动元素可能会覆盖一些非浮动的元 素，这时需要使用CSS的clear属性来清除浮动。clear属性 有四个值，分别是none、left、right和both，以下是四个 值的意义。 例14-14 none：允许两边都可以有浮动对象； both：不允许有浮动对象； left：不允许左边有浮动对象； right：不允许右边有浮动对象。,14.4.4 解决火狐的计算高度问题,在一个XHTML文档中，父元素“father”的宽度是固定的，但 是高度不固定。其子元素若使用了浮动，那么父元素的高度就不 会自动计算。也就是说，子元素不能撑开父元素。但是在IE中， 父元素的高度是自动计算的，子元素能撑开父元素。 处理方法：添加第三个元素，给其指定一个名为clear的类选择器，设定clear属性为both。例14-15,14.5 CSS布局方式：相对定位,除了使用浮动布局外，常用的布局方式还有定位。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-17,14.5.2 两个元素的相对定位,当子元素增加到两个的时 候，使用相对定位的情况 就变得较为复杂。【示例 】本例子有三个div标签 ，其中一个命名为 “father”的div标签是父元 素，另外两个个元素是子 元素。设置第一个子元素 的position属性为 relative，top属性为10像 素。 例14-18,14.6 CSS布局方式：绝对定位,使用绝对定位的子元素，其移动是相对于已经定位的父 元素。若其父元素并未定位，那么使用绝对定位的子元素就 会相对最初的包含块来定位。通常这个最初的包含块是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-20,14.7 本章实例一：制作歌曲专辑列表,本章示例一就介绍了 如何使用浮动来布局 一个图文混排的歌曲 专辑列表。这种混排 的方式同样适用于其 他图文混排的信息列 表中。本实例主要应 用定义列表作为容器 来设置歌曲专辑列表 。本实例最终效果如 图所示。,步骤： 1.新建一个文件夹名为chapter14(实例一)，在该文件夹中新建一个标准XHTML文档，命名为index.html。然后再新建一个images文件夹，用于存放图片。使用定义列表嵌入专辑。实例中有四个专辑，所以整个XHTML文档中插入四个dl标签。由于四个专辑的样式排布是一致的，所以只要制作其中一个专辑，其余复制即可。定义列表包括三个标签，dl、dt、dd。在本实例中，dl标签用于嵌入整个专辑，dt标签用于嵌入专辑图片，dd标签用于嵌入专辑介绍。全部专辑都放入一个名为block的div 标签中。 2.把dt标签设置为左浮动，dt标签就会与dd标签水平排列。 3.要使dt标签中图片居中对齐，还要设置其显示属性为block。,4.设置dd标签中span标签中文字的样式和超链接的样式。由于span标签属于行内元素，要实现span标签的分行，就要将span标签转换为块级元素。 5.将dl标签中的所有内容复制三份，然后换上相应的内容。当四个block容器放在一起，就会因为浮动而产生布局混乱，为了清除浮动，在每个dd标签中加入clear容器。,14.8 本章实例二：给图片加入信息,在许多电影网站或者个人网站的图片上都带有一行文字信息 。若在图片本书加入文字，那么修改起来会很麻烦，每次要修改 文字都要更改图片。本章实例二应用了定位的布局方式来给图片 加入可改动的信息。本实例最终效果如图所示。,步骤： 1.新建一个文件夹名为chapter14(实例二)，在该文件夹中新建一个标准XHTML文档，命名为index.html。然后再新建一个images文件夹，用于存放图片。本例有六章图片，每张样式一样，所以先设置第一张图片的样式。使用block容器作为一张图片的父容器，在该容器中有两个div标签作为其子元素。名为picture的子元素用于放置图片，名为descript的子元素用于放置图片信息。设置父元素block的样式，要使父元素的大小和图片大小一致。 2.设置父元素为相对定位，子元素descript为绝对定位。为了使图片信息位于图片的右下角，要设置bottom属性和right属性的值为5px。 3.设置好第一张图片后，就可以复制另外五张图片。在执行该步骤后，图片会垂直排列。要使其沿水平方向排列，就要设置block容器的浮动属性为left。为了消除浮动产生IE6的双倍边距，要设置显示属性为inline 。,14.9 常见面试题,问题1：使用float属性进行页面布局时，为何总是在不同的浏览器下表现不同？ 问题2：为何设置元素为绝对定位时，元素总是出现在页面的左上角，而不是父元素的左上角？ 问题3：使用clear属性有何作用？,14.10 小结,本章讲解了DIV+CSS布局的基础。 本章介绍了基本盒模型以及边框、补白和边距的概念。 本章的重点是在DIV+CSS的基本布局流程和页面元素的布局，包括常规流、浮动和定位。 本章的难点是了解行内元素和块级元素的区别以及以及相互转化的方法。 在本章的最开始简单地介绍了DIV+CSS的布局流程，在下一章将会详细讲解如何使用DIV+CSS进行页面布局。,
