ホームページ > 記事 > ウェブフロントエンド > [導入の質問] float が div を上に移動させるのはなぜですか? _html/css_WEB-ITnose
[導入の質問] float が div を上に移動させるのはなぜですか? _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:41:411386ブラウズ
最初と 2 番目のコードはほぼ同じで、コード float:left の赤い部分ですが、先発トップ2人が同じではないのはなぜでしょうか？
rree
アドバイスをお願いします！ ！ ！
By
りー
可能のようです 緑のエッジを除去するために、私の質問は、なぜそのような緑のエッジがあるのか、原理は何ですか、そしてなぜ10pxなのかということです。
rree
<!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> アドバイスをお願いします！ ！ ！
ディスカッションへの返信（解決策）
テストしてみました。 。 。
2 つのコードの実際の部分はまったく同じです。 。 。
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; 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> By
りー
可能のようです 緑のエッジを除去するために、私の質問は、なぜそのような緑のエッジがあるのか、原理は何ですか、そしてなぜ10pxなのかということです。
body{
背景色: 緑;
}
背景色は緑に設定されています
本文{
背景色: 緑;
}
あなたの背景色は緑に設定されています
こんにちは、ありがとう。この緑色のエッジがあるのはなぜですか。 div が top:0px;left:0px に近づいていないのはなぜですか。
float:top
float:top
ありがとうございます。まだ動作しません
元の投稿者の 2 つのコードに違いは見つかりませんでした。ie8 と ff のテストでは問題ありませんでした
元の投稿者が言及した緑色のエッジは次のとおりです。ブラウザにはデフォルトで本文に特定のマージン値があるため、ポスターは本文スタイルに margin:0px を追加するだけで済みます。また、visible=false: all div を追加した後も同じ問題が発生しました。 float:left を 20px 上に移動しました。 true にすると、また通常になります
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。