css研究

css
[url]http://www.csszengarden.com/[/url]

[url]http://learning.artech.cn/[/url]


course 1
div：块级元素 （block）
span：行内元素（inline）

[color=red]在标准文档流里面，也就是没有其它一些css样式控制的情况下，块级元素会占据一行，也就是宽带始终是与浏览器宽度一样，与内容无关。而行内元素的宽度只与内容有关。

内联元素(inline element)一般都是基于语义级(semantic)的基本元素。常见内联元素"a"。

块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。比如，我们完全可以把内联元素cite加上display:block这样的属性，让他也有每次都从新行开始的属性。[/color]


div+css层属性定位原理([url]http://www.webw3c.org/divcss-tech/divcss-cengshuxingdingweiyuanli/[/url])
“为何我的层不会老老实实地显示在它该在的位置上？”，这个问题算是在学习“用DIV+CSS制作网页”的过程中问得最多的问题之一了，这次我们将学习如何驾驭它。
作者：COOANT
一、概述
二、position属性
三、top,right,bottom,left属性
四、float属性
五、z-index属性
一、概述
本文以标签“<div></div>”为例进行讲解，部分内容同样适用于部分其它块(block)标签元素。
本文中的范例通过测试的浏览器为IE6、IE7、Firefox2。

我们在平时的网页制作中，已经或多或少的接触过CSS样式表中的“position(位置)”属性，其实这基本算是定位根源所在了。当然了，这并不是全部，如果再加上“float”、“z-index”等属性，我们的层定位将会更加完美。下面我们将一一讲解：


二、position属性
position属性有五个取值，分别为：static, relative, absolute, fixed, inherit, 其中“static”为默认值。


·static
该值为position的默认值，可以省略不写，当position取值为static或者没有设置position属性的时候，div的显示方式为按文本流的顺序从上至下，或者从左到右顺序显示。
例如：
层一层二源代码如下：

<div class="style">层一</div>
<div class="style">层二</div>
.style {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
margin-bottom:5px;
}


·relative
相对定位，相对于什么位置呢？官方手册中是这样说的：“Relative position that is offset from the initial normal position in the flow.”可以简单的如此解释：偏移文本流中最初的位置。最初位置也就是当position取值为static时的位置，也就是说这里的相对定位是相对于它在正常情况下的默认位置的。下图列出了偏移产生前后的位置关系：

完整的代码如下：
偏移前：
<style type="text/css">
.style1 {
position:relative;
height:80px;
width:80px;
margin-bottom:10px;
border:1px solid #000;
background-color:#acd373;
}
.style2 {
position:relative;
height:80px;
width:80px;
border:1px solid #000;
background-color:#f26c4f;
}
</style>
<div class="style1">层一</div>
<div class="style2">层二</div>


偏移后：
<style type="text/css">
.style1 {
position:relative;
left:30px;
top:30px;
height:80px;
width:80px;
margin-bottom:10px;
border:1px solid #000;
background-color:#acd373;
}
.style2 {
position:relative;
height:80px;
width:80px;
border:1px solid #000;
background-color:#f26c4f;
}
</style>
<div class="style1">层一</div>
<div class="style2">层二</div>


结合以上图示和CSS样式表可以得出以下两个结论：

设置了position:relative而不设置left,top等属性的时候，层显示的位置和不设置position属性或者position值取static时一样。
当一个层设置了position:relative，而且使得层位置产生相对偏移时，并不影响文本流中接下来的其他层的位置。
另外我们还可以做如下尝试，当层二对应的css样式表“style2”不设置position:relative时，会发现层一偏移后重叠时，层一覆盖了层二。而不是我们图示上层二覆盖了层一。
原因时这样的，当设置了position:relative，层的层叠级别高于默认的文本流级别。当然了，如果都设置了position:relative，同等级别下将会按照文本流的顺序层叠显示。


·absolute
绝对定位，回忆一下，当我们设置position的值为static或者relative时，层依然存在于文本流中，也就是不管位置是否偏移，文本流中依然为它保留了该有的位置。但当层设置了position:absolute并产生偏移（设置了top,left等值）时，该层将完全从文本流中脱离，进而以该层所在的父容器的坐标原点为参考点进行偏移，可以这理解，该层已经和同级容器中的其它元素脱离了关系，也不会对其它元素产生人和影响（当它不存在！）。
注意：如果父容器没有设置position属性或position值为static时，将以body的坐标原点为参考。

下面我们以三个图示来分别说明。

上面三个页面效果的css样式表如下：

页面一：

<style type="text/css">
.style1 {
height:150px;
width:150px;
border:1px solid #000;
background-color:#a2d39c;
}
.style2 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#f68e56;
}
.style3 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#00adef;
}
</style>
<div class="style1">
<div class="style2"></div>
<div class="style3"></div>
</div>
页面二：

<style type="text/css">
.style1 {
height:150px;
width:150px;
border:1px solid #000;
background-color:#a2d39c;
}
.style2 {
position:absolute;
top:0;
left:0;
height:50px;
width:50px;
border:1px solid #000;
background-color:#f68e56;
}
.style3 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#00adef;
}
</style>
<div class="style1">
<div class="style2"></div>
<div class="style3"></div>
</div>
页面三：

<style type="text/css">
.style1 {
position:relative;
height:150px;
width:150px;
border:1px solid #000;
background-color:#a2d39c;
}
.style2 {
position:absolute;
top:10px;
left:10px;
height:50px;
width:50px;
border:1px solid #000;
background-color:#f68e56;
}
.style3 {
height:50px;
width:50px;
border:1px solid #000;
background-color:#00adef;
}
</style>
<div class="style1">
<div class="style2"></div>
<div class="style3"></div>
</div>
通过以上的范例和理论说明，我们应该从原理上理解了absolute定位。这里补上官方对于absolute的解释：
“Taken out of the flow and offset according to the containing block. ”

截至这里，希望各位可以稍作休息，尝试修改上面范例中的css属性，做到举一反三，充分理解。


·fixed
固定定位，它的效果类似常见的浮动广告，无论如何拖动浏览器的滚动条，层始终悬浮在浏览器的某个位置。由于该属性只能被Firefox很好的支持，虽然可以在通过其它设置在IE6.0中得到同样的效果，但由于本文篇幅原因，不继续对本属性继续作解释。下面的经典案例中将会有相关解释。

·inherit
继承，和其它属性的继承一样。在这里为继承父元素中的position值。
三、top,right,bottom,left属性
这四个属性中的top和left属性之前有使用过（right和bottom用法也一样），大致功能我们基本已经清楚了，这里再简单介绍一下。

这四个属性在设置了position属性，并且值不为static时生效。当position取值relative时，偏离文本流初始位置；当position取值absolute时，以父容器对应的初始点为原点偏移，如果父容器没有设置positon或者position取值static时，以body对应的坐标点为参考点偏移。 top,right,bottom,left属性的取值除了具体的数值外，还可以是百分比、继承、或者auto（默认值）。
四、float属性
取值包括inherit，left，right以及默认值none，该属性用于控制文本流的显示方向。需要注意的是如果设置了该属性并取值为left或right后，会影响到该流后面的其它盒子模型。可以通过设置“clear:both;”清除该属性设置。 例如：
层一层二层三
源代码如下：
<div class="style1">层一</div>
<div class="style1">层二</div>
<div class="style2">层三</div>
.style1 {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
float:left;
margin-bottom:5px;
}
.style2 {
border:1px solid #999900;
background-color:#CCFF99;
width:80px;
height:80px;
clear:both;
margin-bottom:5px;
}

需要注意的是由于float控制的是文本流方向，当为层设置了“position:absolute;”后，float将不再有效，应为此时层已经脱离该文本流。
五、z-index属性
该属性在设置了position并取值为“absolute”或“relative”时有效，用于控制层在Z- 轴上的排列顺序，值为整数（由于不同浏览器的兼容性的区别，最好是正整数），取值越大层越在最上面。

<< css手册下载与css语法介绍用DIV+CSS网站布局教程 >>
查看所有评论
lynn(222.55.18.*) 发表于：2/16/2009 3:22:36 PM
absolute ... 但当层设置了position:relative并产生偏移（设置了top,left等值）时，该层将完全从文本流中脱离，进而以该层所在的父容器的坐标原点为参考点进行偏移，可以这理解，该层已经和同级容器中的其它元素脱离了关系，也不会对其它元素产生人和影响（当它不存在！）。这里写错了吧，应是： 当层设置了position:absolute并产生偏移