CSS+DIV元素位置试验 -

jzgl_javaeye

浏览: 515528 次
性别:
来自: 北京

最近访客更多访客>>

知丿觉

sentkey

yyt8618

Ricychu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

CSS+DIV元素位置试验

博客分类：

WEB JS_CSS_DIV

CSS HTML Web 浏览器



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
		<style type="text/css">
			#s{
				border:red solid 1px;
				
			}
			#b{
				border:blue solid 1px;
				width:200px;
				height:50px;
			}
			
		</style>
	
    </head>
    <body>
      <div id="all">
		<div id="s" >sssssssssss</div>
		<div id="b">bbbbbbbbbbb</div>
	<div>
		
    </body>
</html>

这里首先放两个DIV,一个是"S",一个是"D",为了区别,加上了边框,并以不同的着色来表现.

效果如下图所示:

在S和B上分别加入宽和高属性:

  width:200px; 
    height:50px;

此时变为如下图所示:

接着在S下加入如下属性:

引用

margin-top:100px;
margin-left:100px;

此时变成如下图所示:

此时在S下再加入以下属性:

float:left;

此时变成如下图所示:

从这里可以看出,原先在S下方的B跑到S右上方,位置在了S的右边,紧靠S但只是水平方向紧靠,再来对比一下S和B的属性,发现S比B多出以下属性:

margin-top:100px;
		margin-left:100px;

这里可以得出:默认情况下:Div是以Block元素从上至下排列的,各个元素保持各自的属性但又对其它元素产生影响,如S保持自己的属性(margin),但是双对B属性产生影响,在没有为S添加Float:Left属性之前,B始终在S的下方,但在为S添加了Float:left属性之后,B在S的右方.

接下来为S加入Position属性:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
		<style type="text/css">
			#s{
				border:red solid 1px;
				width:200px; 
				height:50px;
				margin-top:100px;
				margin-left:100px;
				float:left;
				position:absolute;<!--加入属性-->

			}
			#b{
				border:blue solid 1px;
				width:200px;
				height:50px;
			}
			
		</style>
	
    </head>
    <body>
      <div id="all">
		<div id="s" >sssssssssss</div>
		<div id="b">bbbbbbbbbbb</div>
	<div>
		
    </body>
</html>

添加属性后的效果如下所示:

这时,B到了S的上边,看上去不有了什么规律,像是无视了B的存在,这是为S添加了Postion属性:Absoult的结果,当添加了这个属性后,S就脱离了所有元素,而直接以浏览为参照对象.简单来说S就像"飘"在其它之上,而不与其它元素发生关系,也不对其它元素产生影响.

接下来我们在S和B外加入DIV:ALL,为了更好的观看效果:我们去掉S的Position和Float属性,给All加下边框和背景属性,代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
		<style type="text/css">
			#all{
				border:green solid 1px;
				background:#e8e8e8;

			}
			#s{
				border:red solid 1px;
				width:200px; 
				height:50px;
				margin-top:100px;
				margin-left:100px;
			}
			#b{
				border:blue solid 1px;
				width:200px;
				height:50px;
			}
			
		</style>
	
    </head>
    <body>
      <div id="all">
		<div id="s" >sssssssssss</div>
		<div id="b">bbbbbbbbbbb</div>
	<div>
		
    </body>
</html>

加入后的效果如下:

改变窗口大小,效果如下:

可以看到,All随着窗口的改变而改变大小;

接下来我们为All加入Float:left属性:

			#all{
				border:green solid 1px;
				background:#e8e8e8;
				float:left;

			}

效果如下图所示:

改变窗口大小:

可以看到,在给ALL加入Float:left属性后,All的大小只包含了S和B的内容,并且没有随着窗口在小的改变而改变.

引用

从这里可以猜想,当我们加入与All同一级别的Div时,它将会排列在All的右方.

这里我们加入与All同一级别的Div元素ALL2,并加入相应的背景和边框,加入后的代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
		<style type="text/css">
			#all{
				border:green solid 1px;
				background:#cccccc;
				float:left;
				width:300px;
				height:200px;

			}
			#all2{/*加入的ALL2*/
				margin-top:10px;
				border:yellow solid 1px;
				background:yellow;



			}
			#s{
				border:red solid 1px;
				width:200px; 
				height:50px;
				margin-top:100px;
				margin-left:100px;
			}
			#b{
				border:blue solid 1px;
				width:200px;
				height:50px;
			}
			
		</style>
	
    </head>
    <body>
      <div id="all">
		<div id="s" >sssssssssss</div>
		<div id="b">bbbbbbbbbbb</div>
	 <div>
	<div id="all2">
		all2
	</div>
		
    </body>
</html>

加入All2的效果如下图所示:

这里可以看到ALL2仍在All的下方,改变大小也一样,而没有如我们所猜想的那样,改变位置,到其右方.

接下来,我们回到只有一个All的情况,看看ALL下面包含的S和B的情况,以此来对比添加了一个与All同级的All2的情况,看看元素位置在有外围元素和没有外围元素的区别.

在S或B下加入Float:left属性后,会发生一些没有任何规律的位置变化,而且在不同浏览器的显示情情况不一样,但是如果将ALL的大小固定后却不会发生这样的情况.将ALL的大小固定后,去掉S和B的Flost:left属性,代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
		<style type="text/css">
			#all{

				border:green solid 1px;
				background:#cccccc;
				width:700px;
				height:300px;
				float:left;
			}
			
			#s{
				border:red solid 1px;
				width:200px; 
				height:50px;
				margin-top:100px;
				margin-left:100px;
		
			}
			#b{
				border:blue solid 1px;
				width:200px;
				height:50px;
				background:#ff6600;
			
			}
			
		</style>
	
    </head>
    <body>
      <div id="all">
		<div id="s" >sssssssssss</div>
		<div id="b">bbbbbbbbbbb</div>
	 <div>
   </body>
</html>

效果如图所示: