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>把<table>包裹起来，这时这个<span><table>...</span>构成的box的排版属性却成了block的了(e.g.

)。

    其实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:

)。

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

本文转自博客园鸟食轩的博客，原文链接：http://www.cnblogs.com/birdshome/，如需转载请自行联系原博主。