CSSはC++よりもはるかに難しく、混乱しているように感じるので、質問はほとんどありません。
次のHTML本文を検討してください
<div id="mydiv1">12345~~~~~~~~/</div><div id="mydiv2">+_______67890</div>
そしてCSS
#mydiv1 {
float: left;
background-color: red;
margin-right: -30px;
}
#mydiv2 {
float: left;
background-color: blue;
}
これはこのように見えます(私の最新のChromeでは)
2番目のdivがフロートしていて、最初のdivの上にフロートしているので、これは私には理にかなっています。
一方、mydiv2
コンテンツの移動のみからfloatプロパティを削除すると、背景ボックスは同じ場所に残ります。
1)その理由を教えてください。
次に、マージンとフロートを削除し、両方のdivに幅を追加してCSSを作成します
#mydiv1 {
background-color: red;
width: 220px;
}
#mydiv2 {
background-color: blue;
width: 240px;
}
予想通りこんな感じになります
しかし、私がそれに追加float: left
する#mydiv1
と、突然このようになります
2)2番目のdivが2倍になったのはなぜですか?z-index
最初のdivを-1に設定して確認しました。
PS。私はCodeAcademyでチュートリアルを行い、smashingmagazine.comでfloat/margin関連の記事を読みました。悲しいことに、それはすべてを明確にしたわけではありません。これらの質問を私に説明してくれるオンラインリソースや本を提案していただければ幸いです。