《DIVCSS布局基础》PPT课件.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 1div标签的盒模型例子 以下以div标签的盒模型为例子 讲述基本盒模型的基本概念 示例 本例子讲述基本盒模型的概念 14 2 2基本盒模型 下图所示为基本盒模型 在页面中的所有元素都遵循该模型的设置方式 14 2 3边距 边距用于设置页面元素与其它元素的距离 CSS的margin属性用于设置边距距离 1 用长度单位设定margin的值例14 32 用百分比设定margin的值例14 43 边距值的缩写 如果提供全部四个参数值 将按上 右 下 左的顺序作用于四边 如果只提供一个 将用于全部的四边 如果提供两个 第一个用于上 下 第二个用于左 右 如果提供三个 第一个用于上 第二个用于左 右 第三个用于下 例14 5 4 单边距值 margin top margin right margin bottom margin left5 边距重叠例14 6注 在边距重叠时 会淘汰边距较小的一个 边距重叠只发生在边距属性中 补白和边框都不会出现重叠现象 14 2 4补白 补白用于增加页面元素边框与内容之间的空间 CSS的padding属性用于设置补白 1 用长度单位设定padding的值例14 72 用百分比设定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 92 边框宽度border width 在设定边框宽度之前 必须先指定边框的样式 参数 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 color4 边框缩写 14 3页面元素的布局 在了解基本盒模型后 就要开始进入页面元素布局的学习 这一节是学习DIV CSS布局方式最重要的一节 内容对初学者而言比较深 但是只要细心理解每个讲解实例就能深入了解页面元素布局的基本原则 页面元素布局的核心是定位和浮动的基本原理以及块级元素与行内元素的区别 掌握了本小节后就能对DIV CSS布局的原理有相当清晰的理解 14 3 1块级元素与行内元素 所有的XHTML页面元素只有两种 一是块级元素 一是行内元素 表中列出了XHTML中常见的块级元素和行内元素 块级元素和行内元素的区别 在默认情况下 块级元素在页面中垂直排列 行内元素在页面中水平排列 块级元素一般用作其它页面元素的容器 块级元素一般都从新行开始 它可以容纳块级元素和行内元素 行内元素只能容纳文本或者其它行内元素 使用CSS的display属性中的block和inline值 分别代表块级元素和行内元素 例14 11 14 3 2CSS布局方式 常规流 CSS有三种基本的布局方式 分别是常规流 浮动和定位 所谓常规流 normalflow 是指页面元素按照所在XHTML文档的位置顺序排列的布局方式 在没有添加其他布局方式的情况下 页面遵循常规流的布局方式 14 4CSS布局方式 浮动 使用浮动布局是目前网页制作中最为常用的方式 应用了浮动的元素全部都会成为块级元素 并且脱离原来的常规流模式 应用了浮动的元素可以向页面的左边或者右边移动 直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框 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 14none 允许两边都可以有浮动对象 both 不允许有浮动对象 left 不允许左边有浮动对象 right 不允许右边有浮动对象 14 4 4解决火狐的计算高度问题 在一个XHTML文档中 父元素 father 的宽度是固定的 但是高度不固定 其子元素若使用了浮动 那么父元素的高度就不会自动计算 也就是说 子元素不能撑开父元素 但是在IE中 父元素的高度是自动计算的 子元素能撑开父元素 处理方法 添加第三个元素 给其指定一个名为clear的类选择器 设定clear属性为both 例14 15 14 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 17 14 5 2两个元素的相对定位 当子元素增加到两个的时候 使用相对定位的情况就变得较为复杂 示例 本例子有三个div标签 其中一个命名为 father 的div标签是父元素 另外两个个元素是子元素 设置第一个子元素的position属性为relative top属性为10像素 例14 18 14 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 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的双倍边距 要设置显示属性