CSS+DIV元素位置试验

最新推荐文章于 2024-09-17 11:35:25 发布

最新推荐文章于 2024-09-17 11:35:25 发布 · 181 阅读

文章标签：

#CSS #HTML #Web #浏览器

WEB JS_CSS_DIV 专栏收录该内容

10 篇文章

订阅专栏

本文通过实例讲解了CSS中div和float属性的应用，探讨了不同浏览器下的显示差异，以及如何利用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;

			}
			#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",为了区别,加上了边框,并以不同的着色来表现.

效果如下图所示:

[img]http://dl.iteye.com/upload/attachment/148492/925e7b57-69c3-30de-8c18-9eac3bfa7735.png[/img]

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

  width:200px; 
    height:50px;

此时变为如下图所示:

[img]http://dl.iteye.com/upload/attachment/148496/cf0972ac-251e-3c0b-b84c-9b32ce04119b.png[/img]

接着在S下加入如下属性:
[quote]margin-top:100px;
margin-left:100px;[/quote]

此时变成如下图所示:

[img]http://dl.iteye.com/upload/attachment/148502/af0fa8c6-10f4-3312-8ec3-081cda7e8385.png[/img]

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

float:left;

此时变成如下图所示:

[img]http://dl.iteye.com/upload/attachment/148504/78d60116-b88c-3eed-9229-44747ecd15ae.png[/img]

从这里可以看出,原先在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>

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

[img]http://dl.iteye.com/upload/attachment/148506/bea5e867-3f29-3b2e-bf93-cc9612f23f42.png[/img]

这时,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>

加入后的效果如下:

[img]http://dl.iteye.com/upload/attachment/148509/d81b0c16-ed7d-3ca4-8d0e-7357ce6fa605.png[/img]

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

[img]http://dl.iteye.com/upload/attachment/148511/ea196356-a320-3cb3-a489-4becf07e8f85.png[/img]

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

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

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

			}

效果如下图所示:

[img]http://dl.iteye.com/upload/attachment/148513/4e12cd73-1fa1-3942-b6a9-290f24f1cb84.png[/img]

改变窗口大小:

[img]http://dl.iteye.com/upload/attachment/148516/fd06e75c-2d4d-3a01-bc06-18428314f927.png[/img]

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

[quote]从这里可以猜想,当我们加入与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的效果如下图所示:

[img]http://dl.iteye.com/upload/attachment/148522/2579128d-3e81-3149-bcd6-7532b36f5e7c.png[/img]
这里可以看到ALL2仍在All的下方,改变大小也一样,而没有如我们所猜想的那样,改变位置,到其右方.[/quote]

接下来,我们回到只有一个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>

效果如图所示:

[img]http://dl.iteye.com/upload/attachment/148530/3eaad472-9b26-338d-8430-404093ff536e.png[/img]

改变窗口大小:

[img]http://dl.iteye.com/upload/attachment/148532/0e4a1c14-303a-36cc-b0dc-da51f7bc0e45.png[/img]

这时发现S和B的位置并没有随着窗口大小的改变而发生改变.

改变ALL的宽度为Width:10px;

[img]http://dl.iteye.com/upload/attachment/148534/c55a12e4-0f14-3bbb-9804-d9e2b405a6d1.png[/img]

ALL的宽度显然不是10Px,而是S的长度.

接下来,我们为S添加Float:left属性:
在Firfox中的效果如图所示:

[img]http://dl.iteye.com/upload/attachment/148543/4eb2fcff-ebfa-34f6-875e-e02746e7948d.png[/img]

在IE6中的效果如图所示:

[img]http://dl.iteye.com/upload/attachment/148545/8b36b1a6-c5c4-36de-8125-f9cd84f9a059.png[/img]

去掉S中的Float:left属性,而在B中加入Flost:left属性后,在Firfox和IE6中的效果均和只有当All加入Flost:left时的效果一样.如下图所示:

[img]http://dl.iteye.com/upload/attachment/148548/2e3af417-c029-366d-a4f3-9ec78727f51e.png[/img]

此时将S和B同时加上Float:left属性.在IE6和Firfox中显示效果一样,如下图所示:

[img]http://dl.iteye.com/upload/attachment/148550/98ec5c7a-4cbc-3d92-967d-bea8d0deac97.png[/img]

此时,改变ALL的宽度,使其Width:10px;效果如图所示:

[img]http://dl.iteye.com/upload/attachment/148552/bc8d10b1-5262-3e7d-9c2f-0789e43e0259.png[/img]

由此可以看得,ALL实际上起到了一个限定的作用,当All的长度足够长时,S和B按自然的浮动进行排列,当All的长度小于相应的长度时,B就是挤到了S的下面.
另外每个DIV元素的FLoat属性,只对自己及以下的元素起作用.

通过以上实验,可以为我们用CSS+Div进行设计时提供一定的设计参考.