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并产生偏移
[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并产生偏移