《《divcss布局基础》ppt课件》由会员分享，可在线阅读，更多相关《《divcss布局基础》ppt课件（26页珍藏版）》请在金锄头文库上搜索。
1、第14章 DIV+CSS布局基础,在对CSS技术的基础知识有了一定的掌握后就可以开始学习DIV+CSS的布局的方法。DIV+CSS的布局方法简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法。常用的CSS布局方式有浮动、定位等。本章是学习CSS技术最重要的一个部分，读者应多实践本章内各个实例。本章内容包括： 了解DIV+CSS布局的流程 学习盒模型以及盒模型的基本元素 学习页面元素的布局方式 实例制作歌曲专辑列表 实例制作给图片加入信息,14.1 初识DIV+CSS布局的流程,本节通过分析一个企业主页的排布方式来讲解初步了解DIV+CSS布局的方法。该网页的效果图显示
2、如图所示。,14.2 了解盒模型,盒模型是DIV+CSS布局的基础，要实现DIV+CSS布局必需了解盒模型的原理。在页面上的每个元素都能看做一个容器，这个容器就是一个盒子。例如，p标签是一个能装文字的容器，它的高度就是所承载文字的高度。使用DIV+CSS布局，div标签就是布局中所用到的容器。大部分人认为只有div标签能作为容器来安排布局。其实在XHTML页面中几乎所用的标签都是容器，都能被当作容器来使用。页面上的每个容器都占有一定的位置，有一定的大小。页面上的每个容器都会影响其他容器的排布，它们相互作用，而形成一个页面的布局。,14.2.1 div标签的盒模型例子,以下以div标签的盒模型为
3、例子，讲述基本盒模型的基本概念。【示例】本例子讲述基本盒模型的概念。,14.2.2 基本盒模型,图14.15所示为基本盒模型。在页面中的所有元素都遵循该模型的设置方式。,14.2.3 边距,边距用于设置页面元素与其他元素的距离。CSS的margin属性用于设置边距距离。 1用长度单位设定margin的值 2用百分比设定margin的值 3边距值的缩写 4单边距值 5边距重叠,14.2.4 补白,补白用于增加页面元素边框与内容之间的空间。CSS的padding属性用于设置补白。 1用长度单位设定padding的值 2用百分比设定padding的值,14.2.5 边框,边框是页面元素可视范围的最外
4、圈。边框包围的范围包括页面元素的补白和内容。CSS中噢噢那个提供三个设置边框的属性 1边框样式 2边框宽度 3边框颜色 4边框缩写,14.3 页面元素的布局,在了解基本盒模型后，就要开始进入页面元素布局的学习。这一节是学习DIV+CSS布局方式最重要的一节，内容对初学者而言比较深。但是只要细心理解每个讲解实例就能深入了解页面元素布局的基本原则。页面元素布局的核心是定位和浮动的基本原理以及块级元素与行内元素的区别。掌握了本小节后就能对DIV+CSS布局的原理有相当清晰的理解。,14.3.1 块级元素与行内元素,所有的XHTML页面元素只有两种，一是块级元素一是行内元素。表14.2中列出了XHTM
5、L中常见的块级元素和行内元素。,14.3.2 CSS布局方式：常规流,CSS有三种基本的布局方式，分别是常规流、浮动和定位。所谓常规流（normal flow）是指页面元素按照所在XHTML文档的位置顺序排列的布局方式。在没有添加其他布局方式的情况下，页面遵循常规流的布局方式。,14.4 CSS布局方式：浮动,使用浮动布局是目前网页制作中最为常用的方式。应用了浮动的元素全部都会成为块级元素，并且脱离原来的常规流模式。应用了浮动的元素可以向页面的左边或者右边移动，直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框。 CSS提供float属性用于设置元素的浮动，它包含三个值，分别是left、
6、right和none。设置浮动为left值，元素向页面左边浮动；设置浮动为right，元素向页面右边浮动；设置浮动为none，元素不浮动。,14.4.1 两个元素的浮动应用,在页面布局中，很多时候会使用两个元素的浮动应用。例如，页面为两分栏的结构、图文混排都应用了两个元素的浮动。在【示例】中讲解两个子元素的浮动应用。,14.4.2 多个元素的浮动应用,在页面布局中，多个元素的浮动常用于相册排版、列表排版等。【示例】本例子有四个div标签，其中一个命名为“father”的div标签是父元素，其余三个元素是子元素。,14.4.3 清除浮动,使用浮动后，常产生很多意外的结果，因为浮动的元素会脱离原来
7、的常规流。浮动元素可能会覆盖一些非浮动的元素，这时需要使用CSS的clear属性来清除浮动。clear属性有四个值，分别是none、left、right和both，以下是四个值的意义。 none：允许两边都可以有浮动对象； both：不允许有浮动对象； left：不允许左边有浮动对象； right：不允许右边有浮动对象。,14.4.4 解决火狐的计算高度问题,在一个XHTML文档中，父元素“father”的宽度是固定的，但是高度不固定。其子元素若使用了浮动，那么父元素的高度就不会自动计算。也就是说，子元素不能撑开父元素。但是在IE中，父元素的高度是自动计算的，子元素能撑开父元素。,14.5 C
8、SS布局方式：相对定位,除了使用浮动布局外，常用的布局方式还有定位。CSS提供position属性用于定位。使用position定位可以定义元素相对其父元素或者其他元素的精确位置。Position属性共有四个关键字值，分别是static、absolute、relative和fixed。其中static为默认值，表示块保持在原来的位置上。absolute代表绝对定位，relative代表相对定位，这两种定位方式是最常用的。本小节先讲述相对定位。,14.5.1 单个元素的相对定位,使用相对定位，就是子元素相对于自身偏移的位置。要确定子元素相对于自身偏移了多少，就要使用top、bottom、left
9、和right属性来确定。这四个属性能使用长度单位或者关键字auto来设置。例如设定子元素的position属性为relative，然后设置top为10像素，则子元素会相对于自身的顶部边界下移10像素。,14.5.2 两个元素的相对定位,当子元素增加到两个的时候，使用相对定位的情况就变得较为复杂。【示例】本例子有三个div标签，其中一个命名为“father”的div标签是父元素，另外两个个元素是子元素。设置第一个子元素的position属性为relative，top属性为10像素。,14.6 CSS布局方式：绝对定位,使用绝对定位的子元素，其移动是相对于已经定位的父元素。若其父元素并未定位，那么
10、使用绝对定位的子元素就会相对最初的包含块来定位。通常这个最初的包含块是html标签。,14.6.1 单个元素的绝对定位,使用绝对定位同样有top、bottom、left和right四个用于移动的属性。示例14-18示范了父元素没有定位的情况。【示例】本例子有两个div标签，其中一个命名为“father”的div标签是父元素，另外一个元素是子元素。设置子元素的position属性为absolute，top属性为5像素。,14.6.2 两个元素的绝对定位,当子元素增加到两个的时候，使用绝对定位的情况就变得较为复杂。使用绝对定位的元素会脱离原来的常规流，位置停留在父元素的左上角。,14.7 本章实例
11、一：制作歌曲专辑列表,本章示例一就介绍了如何使用浮动来布局一个图文混排的歌曲专辑列表。这种混排的方式同样适用于其他图文混排的信息列表中。本实例主要应用定义列表作为容器来设置歌曲专辑列表。本实例最终效果如图所示。,14.8 本章实例二：给图片加入信息,在许多电影网站或者个人网站的图片上都带有一行文字信息。若在图片本书加入文字，那么修改起来会很麻烦，每次要修改文字都要更改图片。本章实例二应用了定位的布局方式来给图片加入可改动的信息。本实例最终效果如图所示。,14.9 常见面试题,问题1：使用float属性进行页面布局时，为何总是在不同的浏览器下表现不同？ 问题2：为何设置元素为绝对定位时，元素总是出现在页面的左上角，而不是父元素的左上角？ 问题3：使用clear属性有何作用？,14.10 小结,本章讲解了DIV+CSS布局的基础。本章介绍了基本盒模型以及边框、补白和边距的概念。本章的重点是在DIV+CSS的基本布局流程和页面元素的布局，包括常规流、浮动和定位。本章的难点是了解行内元素和块级元素的区别以及以及相互转化的方法。在本章的最开始简单地介绍了DIV+CSS的布局流程，在下一章将会详细讲解如何使用DIV+CSS进行页面布局。 出自俊网天下:http:/,
