div+css初步探索（1）

最新推荐文章于 2024-10-02 22:52:13 发布

czk_love_wyq

最新推荐文章于 2024-10-02 22:52:13 发布

阅读量371

点赞数

分类专栏： div+css

本文链接：https://blog.csdn.net/czk_love_wyq/article/details/41943781

版权

div+css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

先来创建第一个div

<html>
	<head>
		<style type="text/css">
			#redBlock{width:200px;height:200px;background:red}
		</style>
	</head>
	<body>
		<div id="redBlock"></div>
	</body>
</html>

如果css中不设置确定的属性值，那么浏览器默认使用内置的缺省值

比如红色div的间隔，默认状态下在IE和火狐中显示的效果不同

在IE中显示

在火狐中显示

所以我们要在css中的属性赋予确定的值而不要使用浏览器的默认值，以此影响显示的效果不统一。

<html>
	<head>
		<style type="text/css">
			body,div{margin:0;padding:0}
			#redBlock{width:200px;height:200px;background:red}
		</style>
	</head>
	<body>
		<div id="redBlock"></div>
	</body>
</html>

在IE中显示

在火狐中显示

当我们需要在一排中，显示两个div区域，可以使用float属性，就像以下这样。

<html>
	<head>
		<style type="text/css">
			body,div{margin:0;padding:0}
			#redBlock{width:200px;height:200px;background:red;float:left}
			#blueBlock{width:300px;height:200px;background:#009}
		</style>
	</head>
	<body>
		<div id="redBlock"></div>
		<div id="blueBlock"></div>
	</body>
</html>

在IE中

在火狐中

可以发现代码在两个浏览器中显示效果不同，尤其是火狐显示的效果不正常显示，我们把css的缺省值补全。

<html>
	</span><head>
		</span><style type="text/css">
			</span>body,div{margin:0;padding:0}
			</span>#redBlock{width:200px;height:200px;background:red;float:left;margin:20px 0 0 20px}
			</span>#blueBlock{width:300px;height:200px;background:#009;float:left;margin:20px 0 0 20px}
		</span></style>
	</span></head>
	</span><body>
		</span><div id="redBlock"></div>
		</span><div id="blueBlock"></div>
</span></body>
</html>

在IE中显示

在火狐中显示

这里有一个IE6著名的BUG（IE6双倍边距BUG）

所以我们需要改下div中的属性

<html>
	<head>
		<style type="text/css">
			body,div{margin:0;padding:0}
			#redBlock{width:200px;height:200px;background:red;float:left;margin:20px 0 0 20px;display:inline}
			#blueBlock{width:300px;height:200px;background:#009;float:left;margin:20px 0 0 20px}
		</style>
	</head>
	<body>
		<div id="redBlock"></div>
		<div id="blueBlock"></div>
	</body>
</html>

第一个div加入float:left属性的时候，之后的div会跟在第一个div之后。同理第三个div也会显示在第一排，就像这样。

如果我们想要把绿色div放在第二排，则我们可以这样做，目的就是为了清除蓝色方块的浮动对下面绿色方块的影响。

<html>
	<head>
		<style type="text/css">
			body,div{margin:0;padding:0}
			#redBlock{width:200px;height:200px;background:red;float:left;margin:20px 0 0 20px;display:inline}
			#blueBlock{width:300px;height:200px;background:#009;float:left;margin:20px 0 0 20px}
			#greenBlock{width:300px;height:200px;background:#00FF66;float:left;margin:20px 0 0 20px;display:inline}
			.clear{clear:both}
		</style>
	</head>
	<body>
		<div id="redBlock"></div>
		<div id="blueBlock"></div>
		<div class="clear"></div>
		<div id="greenBlock"></div>
	</body>
</html>

在IE中显示（主要每排的第一个div需要改display改为inline防止IE6双边距BUG）