div+cssの基礎知識を理解するlayout_html/css_WEB-ITnose

<span style="font-size:24px;">    <span class="cs">测试1</span>    <span class="cs d2">测试2</span>    <div class="cs">测试3</div>    <div class="cs d1">测试4</div></span> </p>
<p> </p>
<p> </p> 結果:span タグはコンテンツと同じサイズを占有しますが、div タグは行全体を占有します。 <br> <p> </p>
<p>標準フロー</p>: Web ページに表示されるコンテンツの順序と HTML で記述されたコンテンツの順序が一致していれば、標準フローに準拠していることがわかります。 <br> <p> 上記の例のように、test 1、test 2、test 3、test 4 のように、Web 上で表示される順序は HTML で記述された順序と同じです。テスト 1 とテスト 2 は <span> でマークされているため、同じ行に表示されます。テスト 3 はテスト 2 の隣に表示されるはずですが、<div> タグが使用されているため、その前に改行が入り、テスト 3 が新しい行で開始されます。テスト 4 も同じです <strong> </strong> </p> <p></p>ボックス モデル <p>: まず、写真を見てみましょう </p> <p> <strong> </strong></p> <p class="sycode"> コンテンツ: コンテンツ領域は、ボックスに入れたオブジェクトのサイズに相当します。しかし、ボックスモデルでは、高さと幅の属性を使用して「オブジェクトのサイズ」を調整できます。 </p> <p> パディング: パディング、上下左右に分かれています。これは、ボックスに入れたオブジェクトからボックスの境界線までの距離に相当します。これら 4 つの距離も調整可能です。 </p> <p> 枠線: 枠線、つまりボックスの厚さも調整可能です。 </p> <p> マージン: 外側のマージンは上下左右に分かれています。上記 3 つの部分はオブジェクトを含むボックスとみなすことができ、ボックス間およびボックスと他の境界線との距離はマージンによって決まります。 </p> <p> </p> <p></p>Float<p>: float を使用する要素は、標準のフローから切り離されます。下の図に示すように </p> <p> <strong> </strong></p> <p class="sycode"> </p>
<p> <br> 最初の図はフローティングを使用せず、3 つの要素が順番に表示されます。そのため、要素 1 は要素 1 に左フローティングを使用します。標準フローなので、標準ストリームには要素 2 と 3 だけがあり、引き続き順番に表示されます。 </p> <p></p> <p> </p>
<p>位置決め<br>: 相対位置決めと絶対位置決めに分けられます。 </p> <p> <strong>相対配置</strong>: 次の例に示すように、要素は元の位置を基準にして配置されます: </p> <p> 相対配置を使用する前 <strong> </strong></p> <p> </p>
<p> <br> テスト 2 で相対右配置を使用した後 </p> <p> </p> <p> </p> <p class="sycode">そうではない 標準的な流れからの脱却は、単に本来の位置からの逸脱に過ぎません。 </p> <p> </p> <p> </p>絶対配置<p>: 要素は、最も近い位置にある親タグを基準にして配置されます。 </p> <p>ケース 1<strong> </strong> </p> CSS 内 <p> </p>
<p> </p>
<pre name="code" class="sycode"><span style="font-size:24px;">.cs { /*给所有class是cs的加上边框*/border:2px solid #00f;} </span>