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

起動システムには多くの BS テクノロジーが使用されており、私たちが目にする優れた Web ページの大部分は DIV+CSS テクノロジーによって実装されています。DIV+CSS は Web レイアウト手法です。

はブロックレベルの要素を構成する HTML タグであり、Web ページ上で div 要素として表示されると、その前後で自動的に改行されます。後。大きなページを複数の部分に分割できます。その後、CSS でこれらの部分を個別にスタイル設定できます。テーブル レイアウトと比較して、div+css はコンテンツとスタイルのパフォーマンスを分離します。同じテクノロジーを学ぶには、それを習得するという基本的な概念から始める必要があります。 DIV+CSS の基本的な概念を見てみましょう。

まず、ページ上の div 表示の効果を見てみましょう

まず、 タグがインラインである HTML にタグを記述します

えー

マネージド CSS でスタイルを設定します

<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>

ケース 3

配置された親タグがない場合、要素の位置はブラウザの境界線に基づきます。

概要

Div+css は Web ページのレイアウトをデザインするための非常に重要なテクノロジであり、これらの基本知識を習得すると、Web ページのスタイルをデザインするのに役立ちます。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。