61,111
社区成员
发帖
与我相关
我的任务
分享[入门问题]float为什么把div上移了？
先上代码 第一个和第二个差一点 ，就是红色部分的代码float:left,但是两个起始的top却不一样，为什么呢？
请高手赐教！！！
<!DOCTYPE html>
<html>
<head>
<title>untitled</title>
<style>
#HelloDiv{
background-color: red;
height:400px;
width:400px;
margin:50px;
border:40px solid blue;
padding:30px;
float:left;
}
body{
background-color: green;
}
</style>
</head>
<body>
<div id="HelloDiv">
<p>青青园中葵 朝露待日晞</p>
<p>阳春布德泽 万物生光辉</p>
<p>常恐秋节至 焜黄华叶衰</p>
<p>百川东到海 何时复西归</p>
<p>少壮不努力 老大徒伤悲</p>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>untitled</title>
<style>
#HelloDiv{
background-color: red;
height:400px;
width:400px;
margin:50px;
border:40px solid blue;
padding:30px;
float:left;
}
body{
background-color: green;
}
</style>
</head>
<body>
<div id="HelloDiv">
<p>青青园中葵 朝露待日晞</p>
<p>阳春布德泽 万物生光辉</p>
<p>常恐秋节至 焜黄华叶衰</p>
<p>百川东到海 何时复西归</p>
<p>少壮不努力 老大徒伤悲</p>
</div>
</body>
</html>请高手赐教！！！
...全文
请发表友善的回复…
发表回复
chuwuyang 2013-03-06
- 打赏
- 举报
我加了一个visible=false的div后也出现了同样的问题：凡是设置float:left的div都上移了20px，当我把visible=true后就又正常了
chuwuyang 2013-03-06
- 打赏
- 举报
qingYun1029 2010-09-05
- 打赏
- 举报
我测试过了。。。
两段代码的现实情况是一模一样的。。。
ie8
两段代码的现实情况是一模一样的。。。
ie8
aoxls 2010-09-05
- 打赏
- 举报
没发现楼主两段代码有什么不同啊，ie8、ff测试都没问题；
楼主所说的绿边，是由于浏览器默认情况下body会有一定的margin值，楼主只要在body样式里加一条margin:0px;就行了
楼主所说的绿边，是由于浏览器默认情况下body会有一定的margin值，楼主只要在body样式里加一条margin:0px;就行了
overmind 2010-09-05
- 打赏
- 举报
[Quote=引用 6 楼 lzd_83 的回复:]
float:top
[/Quote]
谢谢 这样写么？还是不行啊
float:top
[/Quote]
谢谢 这样写么？还是不行啊
<!DOCTYPE html>
<html>
<head>
<title>untitled</title>
<style>
#HelloDiv{
background-color: red;
width:400px;
margin:0px;
border:40px solid blue;
padding:30px;
float:top left;
}
body{
background-color: green;
}
</style>
</head>
<body>
<div id="HelloDiv">
<p>青青园中葵 朝露待日晞</p>
<p>阳春布德泽 万物生光辉</p>
<p>常恐秋节至 焜黄华叶衰</p>
<p>百川东到海 何时复西归</p>
<p>少壮不努力 老大徒伤悲</p>
</div>
</body>
</html>
Rotel-刘志东 2010-09-05
- 打赏
- 举报
float:top
overmind 2010-09-05
- 打赏
- 举报
[Quote=引用 4 楼 kongwei521 的回复:]
body{
background-color: green;
}
你背景颜色设置的绿色
[/Quote]
您好 谢谢 我想知道的是 为什么会有这个绿边 div为什么不是贴紧 top:0px;left:0px
body{
background-color: green;
}
你背景颜色设置的绿色
[/Quote]
您好 谢谢 我想知道的是 为什么会有这个绿边 div为什么不是贴紧 top:0px;left:0px
蝶恋花雨 2010-09-05
- 打赏
- 举报
body{
background-color: green;
}
你背景颜色设置的绿色
background-color: green;
}
你背景颜色设置的绿色
overmind 2010-09-05
- 打赏
- 举报
overmind 2010-09-05
- 打赏
- 举报
是这样的 如果margin=0的话 还是有一个绿边
http://hi.csdn.net/attachment/201009/5/1343907_1283672355821B.gif
通过
貌似可以消除绿边，我的问题是，为什么会有这么一个绿边，原理是什么，为什么是10px？
http://hi.csdn.net/attachment/201009/5/1343907_1283672355821B.gif
<!DOCTYPE html>
<html>
<head>
<title>untitled</title>
<style>
#HelloDiv{
background-color: red;
width:400px;
margin:0px;
border:40px solid blue;
padding:30px;
float:left;
}
body{
background-color: green;
}
</style>
</head>
<body>
<div id="HelloDiv">
<p>青青园中葵 朝露待日晞</p>
<p>阳春布德泽 万物生光辉</p>
<p>常恐秋节至 焜黄华叶衰</p>
<p>百川东到海 何时复西归</p>
<p>少壮不努力 老大徒伤悲</p>
</div>
</body>
</html>通过
position:relative;
top:-10px;
left:-10px;
貌似可以消除绿边，我的问题是，为什么会有这么一个绿边，原理是什么，为什么是10px？
