我与同事就内嵌(inline)和块(block)Web页面元素问题讨论了很长时间。内嵌HTML元素和块HTML元素之间的差别是Web开发中常常被误解的内容,所以我想花点时间阐述它们,并且阐明他们之间的差别。
如何显示它们
默认情况下,HTML有三种方式显示其元素:
内嵌:元素不在其位置之前或之后强行添加新线条,仅仅消耗必要的空间。 块:元素在其位置之前或之后添加新线条,空间消耗比较大。 隐藏:在浏览器窗口不显示的元素,例如:标签、脚本和字体等等。
它们显示类型的具体描述如下:
块
有如下共有的块元素:
容器 报头元素: h1、 h2、h3等等 段落(<p>) 表 (<table>) 窗体 (<form>) 列表,包含无序或有序的条目
认识块元素行为的一个最好方法是:查看示例。示例使用CSS显示页面中块元素的区域。Listing A给出了HTML的一个简单页面,它为容器元素设置了背景颜色,以此说明在页面的什么位置、用什么方法显示容器。
这个示例为观察块元素的行为提供了很好的可视化线索。浏览器为块元素定义了默认的间距,这意味着需要在不同的浏览器上测试页面情况,从而获得比较好的块元素间距。这些间距依赖于特定元素和不同浏览器的默认设置。同时可以使用CSS控制这些元素,但是浏览器对这些元素的反应则不同了。此时可以选择使用内嵌元素,让我们了解它吧。