理解Div布局

很愚昧的用table布局很久，最近开始学习div+css布局，当初就是由于不理解div的位置控制，所以一直也顾不上深入去学习，加上好久不在开发web应用，所以就放下了，现在开始学习ajax，就必须要学习css+div了，呵呵！
要理解div布局，
  首先要理解CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对 象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该 元素是块元素或者内联元素。其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。

float属性：float : none | left |right
none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边
该属性的值指出了对象是否及如何浮动。
当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)。也就是说，浮动对象display特性将被忽略。

到此基本明白了float的含义了，一个简单例子
.leftfloat{
       width:200px;
       height:100px;
       float:left;
}
<div  class="leftfloat"> </div>
此样式表明该块将向做边块靠齐，如果有三个div都引用此样式则这三个div则横向并排排列。

下面来看position
有以下几个值：static，relative，absolute，fixed。

Static：静态定位。如果你没有设置position属性，那么缺省就是static。top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性，必须把position设置为其他三个值之一。

Relative：相对定位。元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间，但它们也不会从元素的新位置被挤走。

Absolute：绝对定位。元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位。

Fixed：固定定位。元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动。上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性

absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下：

　　1. 没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点，上面例子红色部分(父级黄色区域有 Padding 属性，“坐标原始点”和“内容区域原始点”不一样)。

　　2. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：

　　(1). 父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定，上面例子绿色部分。

　　(2). 父级有 position 属性，父级的“坐标原始点”为原始点，上面例子浅蓝色部分。

　 　relative：相对定位，CSS 写法“ position: relative; ”，参照父级的“内容区域原始点”为原始点，无父级则以 Body 的“内容区域原始点”为原始点，位置由 Top、Right、Bottom、Left 属性决定，且有“撑开或占据高度”的作用，上面例子橙色部分。

当一个元素被绝对定位了，浏览器做的第一件事是把它从流中完全移走，接着放置在定位属性指定的位置上,而该元素原来所占的位置将被充填。

那如果我放置两个绝对定位的元素，谁会被遮挡住呢？这里需要介绍一个叫做z-index的属性，将这个属性设置的值越大，那个元素就会出现的上面。


ok，至此这两个属性基本明白，收集个实例^_^

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>position:fixed in IE6 修正</title>
  6. <style type="text/css">
  7. <!--
  8. body{padding:0 10px;height:100%;
  9. font-size:12px;overflow-y:auto;}
  10. #leftMenu { background: #CCCCCC; height: 300px; width: 150px;
  11.   position: fixed; left: 40px; top: 30px; border: 1px solid #666666; padding: 10px;
  12.   letter-spacing: 0.2em; color:#990033;}
  13. #main{ background:#36F; margin-top:450px; margin-bottom:300px;
  14.   float:right; padding:10px; color:#FFF;}
  15. * html{overflow-x:auto;overflow-y:hidden;}
  16. * html #leftMenu{position:absolute;}
  17. -->
  18. </style>
  19. </head>
  20. <body>
  21. <div id="leftMenu">
  22.   <p>这是左侧的菜单，在标准的浏览器中采用固定定位，而非标准的浏览器（IE6）中，使用了一些HACK，和IE6本身的BUG！</p>
  23.   <p>enjoy it!（这句英语帅不？）</p>
  24. </div>

  26. <div id="main">
  27.   <p>这个是一个测试，IE6下position:fixed是不能使用的，但是我们使用一些技巧就能完美修复这个BUG！</p>
  28.   <p>拖动页面右边滚动条，你可以看到，灰色的左菜单始终固定，这种现象不止于IE7、FireFox，在IE6下也有较为完美的表现~这个是一个测试，IE6下position:fixed是不能使用的，但是我们使用一些技巧就能完美修复这个BUG！</p>
  29. </div>
  30. </body>
  31. </html>




posted on 2009-01-05 02:20  oldkingsir  阅读(2698)  评论(0)  编辑  收藏  举报

导航