网页布局中基于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为块级框，在这种情况下，在文档流中从上至下排列，如果是span元素，其默认为行框，在文档流中从左至右排列。

3.1.2 relative 相对定位

元素框相对于自己在文档流的原位置偏移某个距离。元素框仍保持其未定位前的形状，它原本所占的空间仍然保留，但产生的新位置并不占用文档流的空间。生成相对定位的元素，经由top，bottom，left，right的设置相对于其原位置进行定位。

如图2三个DIV框默认情况下排列应该是从上至下排列，框2元素设置为相对定位后，即CSS样式如下：

框2元素相对自己本来的位置（虚线部分）向左偏移了30像素，下偏移了20像素，但其原来的位置仍然是存在的并且该元素的新位置并不影响其它元素的位置（即其它元素当做该新位置不存在一样）。如果有多个元素使用相对定位切相互重叠则可经z-index设置进行层叠分级。使用相对定位时要小心，否则容易将页面弄得非常乱。相对定位的关键在于定位了的元素的位置是相对于它原本位置进行定位。如果你停止使用相对定位，则元素框的显示位置将恢复正常。

3.1.3 absolute 绝对定位

定位为absolute的元素（CSS 样式中position值为aboslute）脱离普通文档流（如图3，框2元素脱离文档流），并相对于其已定位的第一个祖先元素定位。元素原先在普通文档流中所占的空间会关闭，就好像元素原来不存在一样。不论原来它在正常流中生成何种类型的框，元素定位后生成一个块级框。 relative与absolute的差别：第一，相对定位的元素在普通文档流中的位置保留，而绝对定位的元素在普通文档流中的位置会被删除。第二，relative定位的层是相对于自身，无论其父元素是何种定位方式，而absolute的定位是相对于最近的已定位祖先元素（已定位可以理解为position属性不为static），如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（（document window）文档窗口，注意既不是body元素也不是浏览器）。

3.1.4 fixed 固定定位

Position属性为fixed的元素定位方式同absolute类似，但它的的定位是相对于WEB浏览器。在WEB浏览器中，元素在文档滚动时，fixed定位元素不会再随着文档滚动而是相对于浏览器停在一个固的定位置。通过它可以让HTML元素脱离文档流固定在浏览器的某个位置。在 IE7，E8、Firefox、Opera、Google等浏览器中使用都没有问题，唯独低版本的IE中，这个属性无效。不过随着旧版本的淘汰，也没有必要在这个兼容性问题上花太多的时间。

3.2 float浮动属性

CSS1 中首次提出了浮动，它以Netscape 在 Web 发展初期增加的一个功能为基础。浮动不完全是定位，不过，它也不是正常文档流布局。float属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None （默认的） 使元素不浮动，Inherit 将会从父级元素获取float值。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。元素设置成浮动以后，会生成一个块级元素，而不论它本身是何种元素。该浮动元素将脱离文档流（想象成其漂浮在文档流之上），它将不再独自占据一行。浮动元素可以设置向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框时自动换行。

4 几种定位方式的混合使用

4.1 父元素和子元素使用不同定位方式的组 合

在以上文章谈到的定位方式中，除了 position 属性为fixed的元素定位是相对于浏览器定位，其它的定位方式都是相对于其父元素或者祖先元素（absolute）进行定位。本节将对父元素对子元素的定位影响进行简单阐述。以下几种方式都是子元素可以参照父元素进行定位的情况。

4.1.1 父元素position属性为默认值（static）

此时不管父元素是在普通文档流中还是处在浮动状态（float属性不为none）下，其子元素的position属性可以是static，relative，或者是浮动元素。

4.1.2 父元素position属性为relative

此时不管父元素是在普通文档流中还是处在浮动状态下，其子元素的position属性可以是static，relative，absolute或者是浮动元素。

4.1.3 父元素position属性为或absolute或fixed

此时父元素是绝对定位，其float属性是无效的。但子元素的position属性可以是static，relative，absolute或者是浮动元素。

4.2 同级元素间的定位

同级元素间使用不同的定位方式时，可以使用left，top，right，bottom，margin等属性来调整他们之间的位置，如果有重叠的元素，z-index可以调整重叠元素的重叠层次，但该属性仅能在已定位的元素上奏效，即当元素的position属性为static时z-index属性是无效的。

5 总结

在DIV+CSS网页布局方式中元素定位是比较晦涩的方面，即使有经验的CSS开发人员也会遇到一些问题。文章试图针对CSS定位的三种基本机制和四种定位方式进行一些深入的分析，使DIV+CSS网页布局中的定位技术更容易被理解和应用。

参考文献：

[1] Andy Budd，Cameron Moll，Simon Collison.精通CSS：高级Web标准解决方案[M].陈建瓯，译.北京：人民邮电出版社，2006：27-36.

[2] 张瑞，楚书来.CSS盒子模型在网页布局中的应用研究[J].计算机光盘软件与应用，2012（6）：133-134.

[3] 赵清华，林学华.基于DIV+CSS的网页布局技术应用研究[J].现代计算机：专业版，2010（5）：140-142.