ホームページ > ウェブフロントエンド > htmlチュートリアル > [導入の質問] float が div を上に移動させるのはなぜですか? _html/css_WEB-ITnose

[導入の質問] float が div を上に移動させるのはなぜですか? _html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 09:41:41
オリジナル
1409 人が閲覧しました

この投稿は overmind によって最終編集されました: 2010-09-05 12:15:48

最初と 2 番目のコードはほぼ同じで、コード float:left の赤い部分ですが、先発トップ2人が同じではないのはなぜでしょうか?
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 にすると、また通常になります

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート