第十四章DIVCSS布局基础.pptVIP

第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.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 边框 边框是页面元素可视范围的最外圈。边框包围的范围包括页面元素的补白和内容。CSS中噢噢那个提供三个设置边框的属性 1．边框样式 2．边框宽度 3．边框颜色 4．边框缩写 14.3 页面元素的布局 在了解基本盒模型后，就要开始进入页面元素布局的学习。这一节是学习DIV+CSS布局方式最重要的一节，内容对初学者而言比较深。但是只要细心理解每个讲解实例就能深入了解页面元素布局的基本原则。页面元素布局的核心是定位和浮动的基本原理以及块级元素与行内元素的区别。掌握了本小节后就能对DIV+CSS布局的原理有相当清晰的理解。 14.3.1 块级元素与行内元素 所有的XHTML页面元素只有两种，一是块级元素一是行内元素。表14.2中列出了XHTML中常见的块级元素和行内元素。 14.3.2 CSS布局方式：常规流 CSS有三种基本的布局方式，分别是常规流、浮动和定位。所谓常规流（normal flow）是指页面元素按照所在XHTML文档的位置顺序排列的布局方式。在没有添加其他布局方式的情况下，页面遵循常规流的布局方式。 14.4 CSS布局方式：浮动 使用浮动布局是目前网页制作中最为常用的方式。应用了浮动的元素全部都会成为块级元素，并且脱离原来的常规流模式。应用了浮动的元素可以向页面的左边或者右边移动，直到其边缘接触到其父元素的边框或者另外一个浮动元素的边框。 CSS提供float属性用于设置元素的浮动，它包含三个值，分别是left、right和none。设置浮动为left值，元素向页面左边浮动；设置浮动为right，元素向页面右边浮动；设置浮动为none，元素不浮动。 14.4.1 两个元素的浮动应用 在页面布局中，很多时候会使用两个元素的浮动应用。例如，页面为两分栏的结构、图文混排都应用了两个元素的浮动。在【示例】中讲解两个子元素的浮动应用。 14.4.2 多个元素的浮动应用 在页面布局中，多个元素的浮动常用于相册排版、列表排版等。【示例】本例子有四个div标签，其中一个命名为“father”的div标签是父元素，其余三个元素是子元素。 14.4.3 清除浮动 使用浮动后，常产生很多意外的结果，因为浮动的元素会脱离原来的常规流。浮动元素可能会覆盖一些非浮动的元素，这时需要使用CSS的clear属性来清除浮动。clear属性有四个值，分别是none、left、right和both，以下是四个值的意义。 none：允许两边都可以有浮动对象； both：不允许有浮动对象； left：不允许左边有浮动对象； right：不允许右边有浮动对象。 14.4.4 解决火