[入门问题]float为什么把div上移了？_html/css_WEB-ITnose
- WBOY原創
- 2016-06-21 09:41:411383瀏覽
先上代码 第一个和第二个差一点 ，就是红色部分的代码float:left,但是两个起始的top却不一样，为什么呢？
请高手赐教！！！
通过
貌似可以消除绿边，我的问题是，为什么会有这么一个绿边，原理是什么，为什么是10px？
<!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> 请高手赐教！！！
回复讨论(解决方案)
我测试过了。。。
两段代码的现实情况是一模一样的。。。
ie8
是这样的 如果margin=0的话 还是有一个绿边
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？
body{
background-color: green;
}
你背景颜色设置的绿色
body{
background-color: green;
}
你背景颜色设置的绿色
您好 谢谢 我想知道的是 为什么会有这个绿边 div为什么不是贴紧 top:0px;left:0px
float:top
float:top
谢谢 这样写么？还是不行啊
<!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> 没发现楼主两段代码有什么不同啊，ie8、ff测试都没问题；
楼主所说的绿边，是由于浏览器默认情况下body会有一定的margin值，楼主只要在body样式里加一条margin:0px;就行了
我加了一个visible=false的div后也出现了同样的问题：凡是设置float:left的div都上移了20px，当我把visible=true后就又正常了
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn