Web页中的HTML元素的排版布局规则

    我们知道每个Web页面都是由一大堆的HTML元素组成的,我们把每对<element>...</element>这样的结构称为box,在Web页面的排版布局中,浏览器把这样的box作为排版的元素,并且把box分为了inline level和block level两种类型。

    当然这个box内是可以容纳很多其它的HTML标签的,但是不管它的内部有多少的TAGs,box都被我们看成是一个排版元素,比如:<div style="border: solid 1px blue"> abc </div>和<table> <tr> <td> <span> <i> abc </i> </span> </td> </tr> </table>就可以被看成是两个排版元素div和table(当然div和table的内部还可以继续细分子的box)。

    在browser的默认排版策略(没有任何的CSS修饰)中,box的inline和block分别指的是:

    Inline Level:元素按从左向右排列,就像我们输入文字一样,一行容纳不下了自动分行继续显示。比如text、<a>、<img>、<span>等都属于inline element(除了30个block level的TAGs,和几个none的TAGs,其它大多数的标签都是inline level的;

    Block Level:相对于它的parentElement构成的box来说,它的排版始终会独自占一行,就是在block level的元素后必然会新起一行。比如<form>、<hr>、<div>、<table>、<p>等30个TAGs都属于block element。

    在大多数的情况下,虽然我们完全可以在inline level的元素中嵌套block level的元素,可是这样会对它们的显示效果带来一些混淆和不确定。比如<div>正常情况下是单独占一行的,可是我们却可以使用一个inline level的元素<span>把<div>包裹起来,这时这个<span><div>...</span>构成的box排版属性仍是inline的(e.g.

span&div

)。可是如果我们用<span>把<table>包裹起来,这时这个<span><table>...</span>构成的box的排版属性却成了block的了(e.g.
span&table
)。

    其实inline和block直观的表现就是,比如<a>link1 </a>text1 <a>link2 </a>text2 ...这样的HTML在browser里是可以显示一行上(preview:link1 text1 link2 text2 ...),而<table> <tr> <td> text1 </td> </tr> </table> <table> <tr> <td> text2 </td> </tr> </table> ...是不能显示在一行上的(preview:

text1
text2
)。

    以上是browser对于box的默认的排版策略,而我们可以通过css来改变这些默认的策略。使用css中提供的position(配合top,left)、float和clear三个属性就可以实现用户定制Web页中元素的排版布局策略。 

   :所有示例都只针对IE6.0sp1。

posted on 2005-01-06 23:52  birdshome  阅读(...)  评论(...编辑  收藏

导航