网页布局中基于CSS定位方式研究.doc

网页布局中基于CSS定位方式研究 　　摘要：利用DIV+CSS的方式进行网页布局是现代网页设计的常用方式，CSS定位是其应用的难点。框模型是CSS的基础，以此为基础详细介绍了利用CSS进行网页布局定位的四种方式和三种定位机制。通过讨论父级框元素定位方式和定位机制的不同变化，阐述了CSS中position属性与float属性的组合使用时对网页布局定位的影响。 　　关键词：DIV+CSS；框模型；CSS定位；网页布局 　　中图分类号：T P 393.092 文献标识码：A 文章编号：1009-3044（2012）30-7339-03 　　1 概述 　　DIV+CSS一种网页的布局方法，这种方法有别于传统的HTML网页设计语言中的表格（table）布局方式，这种方式可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language（可扩展超文本标识语言）的缩写。XHTML基于可扩展标记语言（XML），是一种在HTML 基础上优化和改进的的新语言，目的是基于XML应用与强大的数据转换能???，适应未来网络应用更多的需求。在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。所以熟练掌握DIV+CSS定位方式是现代网页布局设计必不可缺的技能。CSS有四种定位方式，这四种方式之间又可以组合从而呈现更多样的网页布局。为了理清这些CSS的定位方法，并且能够实际应用这些定位方法，文章对CSS的定位方式和定位机制进行了一些较为全面的分析。 　　2 框模型 　　框模型是DIV+CSS布局的基础概念之一，它规定元素如何显示以及（在某种程度上）如何相互交互。页面上的每个元素被看作一个矩形框，这个框由元素的内容（content）、内边距（padding）、边框（border）和外边距（margin）组成（见图1）。 填充出现在内容区域的周围。如果在元素上添加背景，那么背景会应用于由内容和填充组成的区域。因此，常常使用填充在内容周围创建一个隔离带，使内容不会与背景混在一起。添加边框会在填充的区域外边加一条线。这些线可以有多种样式，比如实线、虚线或点线。在边框外边是空白边，空白边是透明的，一般使用它控制元素之间的间隔。 　　div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容。块级框从上到下一个接一个地排列，就是说块级框会默认换行，框之间的垂直距离是由框的垂直外边距计算出来。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。行内框在一行中水平排列，就是说行内框不自动换行除非人为添加换行或者行内框到达其父框元素的边缘才会换行。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高（height）可以增加这个框的高度。 　　元素框的类型可以使用 display 属性改变。这意味着，通过将 display 属性设置为 block，可以让行内元素（比如 元素）表现得像块级元素一样。将display属性设置为inline，可以让块级元素表现得像行框一样。还可以通过把 display 设置为 none，让生成的元素不可见。这样的话，该框及其所有内容就不再显示，且不占用文档流中的空间。 　　3 CSS 定位 　　CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成通常需要使用多个表格才能完成的任务。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大。 　　CSS 有三种基本的定位机制：文档流（普通流）、浮动和绝对定位。 　　除非专门指定，否则所有框都在文档流中定位，也就是说，文档流中的元素的位置由元素在 X（HTML） 中的位置决定。而绝对定位和浮动则是分别通过position和float属性实现的。对这两个属性的不同设置，就会引起div元素的定位机制的变化，这是网页设计者需要关注的地方。 　　3.1 CSS position 属性 　　通过使用 position 属性，可以选择 4 种不同类型的定位static 、relative 、absolute 、fixed。这四种不同的定位方式同时影响了其不同的定位机制。 　　3.1.1 static静态定位 　　这个是默认值，其实此时元素框是没有定位的，因为top， bottom， left， right的设置不起作用。DIV为块级框，在这种情况下，在文