您的位置：首页 > Web前端 > CSS

div+css初步探索（1）

2014-12-15 15:47 232 查看
先来创建第一个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）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航