我与同事就内嵌（inline）和块（block）Web页面元素问题讨论了很长时间。内嵌HTML元素和块HTML元素之间的差别是Web开发中常常被误解的内容，所以我想花点时间阐述它们，并且阐明他们之间的差别。

如何显示它们

默认情况下，HTML有三种方式显示其元素：

• 内嵌:元素不在其位置之前或之后强行添加新线条，仅仅消耗必要的空间。
• 块:元素在其位置之前或之后添加新线条，空间消耗比较大。
• 隐藏:在浏览器窗口不显示的元素，例如：标签、脚本和字体等等。

它们显示类型的具体描述如下：

块

有如下共有的块元素：

• 容器
• 报头元素： h1、 h2、h3等等
• 段落(<p>)
• 表 (<table>)
• 窗体 (<form>)
• 列表，包含无序或有序的条目

认识块元素行为的一个最好方法是：查看示例。示例使用CSS显示页面中块元素的区域。Listing A给出了HTML的一个简单页面，它为容器元素设置了背景颜色，以此说明在页面的什么位置、用什么方法显示容器。

这个示例为观察块元素的行为提供了很好的可视化线索。浏览器为块元素定义了默认的间距，这意味着需要在不同的浏览器上测试页面情况，从而获得比较好的块元素间距。这些间距依赖于特定元素和不同浏览器的默认设置。同时可以使用CSS控制这些元素，但是浏览器对这些元素的反应则不同了。此时可以选择使用内嵌元素，让我们了解它吧。

内嵌

页面中使用内嵌元素则没有间隔；也就是说，元素之间衔接紧密，没有压书线间隔（当然可以插入间隔）。下面是一些共有的内嵌元素：

• 使用 <a> 的标签
• 拆分标签的内嵌版本
• 文本装饰标签，如：<strong> （有可能的话可以使用CSS）
• 断行 <br>
• 窗体输入标签

Listing B给出的示例为观察内嵌元素的行为提供了可视化线索。此示例中，内嵌元素添加到块元素示例上，在页面的块容器中显示内嵌元素的行为。

需要注意的是：断行元素没有显示。它没有消耗任何屏幕空间，所以没有显示。基本上，内嵌元素在线上显示。

可能会认为这是没头脑的人干的事，但是，在展示和设计Web程序时，内嵌元素和块元素之间的差别是很重要的。必须清楚地了解元素的行为，才能在页面上正确组合、合理布局这些元素。可以使用CSS和显示属性撤销元素的默认行为。

CSS撤销

CSS显示属性为Web开发人员提供了一个魔棒。它能快速修改内嵌和块元素的行为。下面的例子在前面示例的基础上改变了每一个元素的行为。对于页面上每一个HTML元素，都在CSS定义中添加了显示属性。语法如下：

display: block | inline | list-item |

none

现在，我们注意块和内嵌值，在Listing C给出的示例中，将默认的块元素更改成内嵌元素，而将内嵌元素改成块元素。

你将注意到，段、报头和拆分元素中包含的条目出现在相同队列。同时，范围元素出现在行中断之前，行中断之后出现的是拆分标签，拆分标签没有包含它们。无序列表中单个列表项目也出现在它们自己的队列中。

显示属性看起来很简单，但是其功能却很强大，因为它将显示控制权交到你手中。我必须重申测试和再测试的重要性，只有通过测试，才能保证所有浏览器中得到期望的显示行为。

显示属性的无值项也很重要，它允许通过在视图中隐藏条目，而取消条目的显示行为。经常与JavaScript组合使用，控制页面元素的显示情况，如菜单栏的显示等等。

了解元素

这个简单的设计问题经常被Web开发者忽视或误解。关于块和内嵌行为的知识和哪个页面元素属于哪个组的知识，能够帮助更好地理解如何显示页面（或为什么有些元素在某种方式下显示）。CSS和显示属性提供了强大的否决权，它允许撤销元素默认的显示行为。

Tony Patton作为程序开发员开始了其职业生涯，他通过了Java、 VB、 Lotus和XML认证