« 网页设计杂谈(4)——工作职责兼谈工资水平（下） | 网页设计杂谈(5)——jQeury能给我们什么？ »

你问我答(31)——行内元素与块级元素

这个问题不少读者问起，以前都是比较简单的答复了一下。由于问的人比较多，今天专门来谈一谈这个问题。

问题起因：

我们在书中举过非常简单的使用a元素制作网页菜单的例子，本质上就是给a元素设置高度、宽度，以及边框等属性。例如下面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
  <head>
  <style>
  a{
    width:200px;
    line-height:40px;
    border:1px solid red;
    background-color:#CCC;
    text-decoration:none;
    text-align:center;
  }
  </style>
  </head>
<body>
  <a href="#">链接文字</a>
</body>
</html>

显然，我们希望将上面的超级链接设置为200像素宽，40像素高，红色边框，灰色背景，取消下划线。

那么在浏览器中到底是什么效果呢？下面左图是在IE 6 中的效果，右图是在Firefox中的效果。


blcok-inline.gif

可以看到，在IE 6 中的效果，正是我们希望的效果，而在Firefox中，效果并不是我们希望的，宽度宽度都不正确。这是什么原因呢？

释疑

这里的原因在于，根据CSS规范的规定，每一个网页元素都有一个display属性，用于确定该元素的类型，每一个元素都有默认的display属性值，比如div元素，它的默认display属性值为“block”，成为“块级”元素(block-level)；而span元素的默认display属性值为“inline”，称为“行内”元素。

div这样的块级元素，就会自动占据一定矩形空间，可以通过设置高度、宽度、内外边距等属性，来调整的这个矩形的样子；与之相反，像“span”这样的行内元素，则没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。

那么链接 a 元素，在默认情况下是什么元素呢？答案是“行内元素”，因此像上面代码中那样，对a元素设置高度、宽度等属性，是无效的，这也就说明了在Firefox中，显示成图中的样子的原因了。

那么在IE6中，为什么等到了我们希望的效果呢？答案是IE在默认情况下，并没有遵守CSS的规范，它对a元素也同样设置了高度、宽度等属性。因此这里应该说Firefox是符合规定的，而IE在默认下，并不是规范的解释方法。

这里需要说明的是，如果我们给网页加上 DOCTYPE 指令，对HTML文档的类型加以限定，那么在IE中也会对他按照标准的CSS规范来解释这个代码。

例如，将上面代码中的第一行，改为：

1
2
3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

这时在IE中看到的效果，就会与Firefox中相同了，说明当使用了DOCTYPE指令之后，IE会按照标准的方式解释上面的代码，从而得到与Firefox中相同的效果。

那么如果希望在标准的方式下，在Friefox和IE浏览器中，都能使a元素获得我们希望的效果，该怎么办呢？

解决方法

方法很简单，只需要使用display属性，强制把a元素由inline元素改为block-level即可，方法是，在a元素的CSS样式中增加一条：

1

display:block;

这时在IE、Firefox中就都可以得到我们想要的效果了，可以随意设置高度宽度等各种几何属性了。

总结与提高

通过display属性，可以方便地改变一种元素的类型，因此如果读者理解这一点，就会知道实际上div元素和span元素，只需要通过display属性，就可以相互转换了。

因此，无论一个网页时有什么样的HTML标记来构成的，比如div、ul、li、p等等，他们本质上都是一些盒子而已，在浏览器的眼中，一个网页就是一大堆盒子，你的任务就是把这些盒子按照你的要求放在合适的位置。至于这个盒子是ul、li、p还是div，都无所谓的。

比如p标记，完全可以理解为有了一些预设属性值的div。比如，你把网页上的p标记，换成div，然后对这个div设置一些CSS属性，就可以和p完全一样了。这就好像，小学我们学习加法和减法，后来才知道，加法和减法本质是一样的，1-1 就等于 1 + (-1) ，同样，乘法和除法也是一样的。

真正把原理理解透彻了之后，在设计的时候，才可能做到天马行空一样的自由。

=======华丽的分割线========================

2008年10月29日补充：

鹤庭逸 和 anyliv 两位对这篇文章的总结和提高部分，提出了一些意见，我觉得很有益处。

在这篇文章中，我们谈的实际上是“浏览器眼中”网页，而不是“访问者眼中”的网页。这个区别就好像，一个“排字工人眼中”的小说，和“读者眼中”的小说，是完全不同的，前者只管格式，根本不管内容，而后者关注的是小说的内容。

同样，对于网页来说，作为设计师，在定义网页结构和内容的时候，关注的是网页的结构和内容，在排版的时候，关注的浏览器如何显示这个页面。

我们说，p标记和div标记，实际上都是盒子，是强调了问题的一个方面。而从另一个方面——结构和内容的方面来说，当然是完全不同的，不应该、也没有必要代替的。

希望以上补充可以使这篇文章更全面一些。

再次感谢 鹤庭逸 和 anyliv ！

6,566

这篇文章发表于 2008年10月26日 星期日 1:10 pm，并被分类于你问我答。 您可以通过订阅 RSS 2.0 跟踪对这篇文章的评论。 您可以对这篇文章发表一条评论，或者在您自己的网站中引用 (Trackback) 它。



欢迎您发表留言

(须填写)
(须填写,不公开)
请注意：这里输入的HTML代码会被屏蔽，如果需要讨论复杂的具体代码问题，请到我们的论坛发贴，谢谢！

24条留言