html - ブラウザは2つのブロック要素をどのように結合しますか?

Question

要素の計算で混乱しています。ブラウザーが要素のサイズを計算する方法は知っていますが、ブラウザーが 2 つ以上の要素をどのように扱うかはわかりません。パディング、マージン、ボーダーを持つ 2 つのブロック要素があるとします。次の場合、ブラウザはそれらをどのように扱いますか。

• 1 つは左にあり、もう 1 つは右にありますか?
• 1つは上に、もう1つは下にありますか？
• 1つは別のものの中にありますか？

Answer 1

あなたの質問は少しあいまいです.すべての要素には一意のIDまたはクラスがあり、ブラウザがそれらをすべて異なる方法で処理し、それぞれに異なるスタイルを追加できます.

<div id="container">
<div class="element1"></div>
<div class="element2"></div>
</div>

CSS スタイル

.element1 {
float:left;
background:red;
border-style: solid 2px
}
.element2{
float:right;
background:yellow;
border-style: solid 5px
}