用户定制Web页中元素的排版布局策略

用户定制Web页中元素的排版布局策略

    在"Web页中的HTML元素的排版布局规则"一文中，我们简述了browser是以怎样的策略来排版布局的，但很多时候默认的排版却不能完全满足我们的需要，所以我们还需要靠自己来定制Web页中HTML元素的排版布局策略。

    我们可以使用这些下css属性来定制页面的显示效果，它们是：clear、float、clip、overflow(又可分别分为overflow-x和overflow-y)、display和visibility。不过属性clip、overflow和visibility不是我们关心的重点，因为它们虽然影响页面的最终显示的效果，可是它们却不能影响browser里元素的布局规则。 

     我们可以查看msdn看看clear、float和display的详细含义，简单说一下呢。这三个css属性都是影响我们在'规则'一文中说道的HTML元素的inline-level和block-level问题的。其中clear和float是相对的两个属性，clear:none是默认值，允许元素两边都有inline-level的box存在；clear:left，不允许元素左边有inline-level的box存在；clear:right，不允许元素右边有inline-level的box存在；clear:both，不允许有inline-level的box存在于一行。float:none是默认值，元素不漂浮；float:left，元素漂浮于对象布局流的右边，float:right，元素飘浮于对象布局流的左边。 

    属性display看起来比较麻烦，因为它有很多的取值，可是实际上我们可以简单的把display属性看成是用来定义box的level方式的，到底是inline的还是block的。比如我们知道div默认是block-level的，我们可以使用<div style="display:inline">...</div>，它就变成inline-level的了，同时它也就遵循inline-level的排版布局策略了。display属性着重的是描述元素的render方式，所以当我们使用display:none时，元素将完全的消失掉，就和html代码中没有这个元素的显示效果一样(当然元素仍然在DHTML树中，可以使用脚本取到)。顺便插一句，display:none和visibility:hidden的区别，元素如果设置了属性后者，虽然也是不会再显示出来了，可是该元素的物理位置却是被browser保留了的，页面中将会显示一个和元素bounds一样的空白区域。 

    布局说完了，再来说一下元素的定位问题，定位是由属性：position、top(还有left、right、bottom，下面简称为TLRB)和z-index来控制的。其中TLRB四个属性是依赖于position的取值而起作用的，position取值为static、absolute和relative。如果postion取static，TLRB将不会起任何的定位作用；position取absolute，TLRB将把其所在的viewport(下面有解释)的左上角作为top和left的(0,0)起点，由此来定位元素；position取relative，TLRB将把元素本来布局流中的位置的左上角坐标作为top和left的(0,0)起点，并由此来定位元素。比如代码：

< div  id ="div1"  style ="border: solid 1px blue; width: 200; height: 200; position: absolute;
    top: 50; left: 50" >
     < div  id ="div2"  style ="border: solid 1px green; width: 100; height: 100; position: absolute;
         top: 25; left: 25" >
     </ div >
</ div >

    将显示为：
   
    上面说到的viewport是什么呢？在这个示例中，对于容器元素div来说，div1圈起来的蓝色区域就是div2的viewport，所以div2的position虽然是absolute，但是它的top&left(25,25)却不是相对于上图中的(0,0)。所以在viewport中定位元素时，要仔细却别于position为relative时的情况，虽然代码：

< div  id ="div1"  style ="border: solid 1px blue; width: 200; height: 200; position: absolute;
    top: 50; left: 50" >
     < div  id ="div2"  style ="border: solid 1px green; width: 100; height: 100; position: relative;
         top: 25; left: 25" >
     </ div >
</ div >

的显示效果和上图相同，但是元素的定位原理却是不同的。 

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