CSSレイアウトmodel_html/css_WEB-ITnose

レイアウト モデルは、ボックス モデルと同様、CSS の最も基本的かつ中心的な概念です。 ただし、レイアウト モデルはボックス モデルに基づいており、私たちがよく CSS レイアウト スタイルや CSS レイアウト テンプレートと呼ぶものとは異なります。レイアウト モデルが基礎である場合、CSS レイアウト テンプレートは最終的な外部表現です。 CSS には 3 つの基本的なレイアウト モデルが含まれており、英語で要約すると、Flow、Layer、Float となります。

Web ページでは、要素には 3 つのレイアウト モデルがあります:

1. Flow
2. Float
3. Layer

Flow モデル

Flow は、デフォルトの Web ページ レイアウト モデルです。つまり、デフォルト状態の Web ページの HTML Web 要素は、フロー モデルに従って Web ページのコンテンツを配信します。

流体レイアウト モデルには 2 つの典型的な特性があります:

1. デフォルトでは、ブロック要素の幅が 100% であるため、ブロック要素は垂直方向に拡張され、含まれる要素内で上から下に順番に配置されます。実際、ブロック要素はすべて行の形式で位置を占めます。
2. フローモデルでは、インライン要素は、含まれる要素内で左から右に水平に表示されます。 (インライン要素はブロック要素ほど支配的ではなく、単独で 1 行を占有します)

フローティング モデル

ブロック要素は非常に支配的で、単独で 1 行を占有します。2 つのブロック要素を並べて表示したい場合はどうすればよいでしょうか。側？心配しないでください。要素を float に設定すると、この願いを達成できます。

デフォルトではどの要素もフローティングにすることはできませんが、CSS を使用してフローティングとして定義することができます。div、p、table、img などの要素はフローティングとして定義できます。

レイヤーモデル

レイヤーレイアウトモデルとは何ですか?レイヤー レイアウト モデルは、画像ソフトウェア PhotoShop で非常に人気のあるレイヤー編集機能のようなもので、各レイヤーを正確に配置して操作することができます。しかし、Web デザインの分野では、レイヤー レイアウトは Web ページ サイズの流動性のために一般的ではありませんでした。 。ただし、Web ページ上でローカルにレイヤー レイアウトを使用することには依然として利点があります。 HTMLのレイヤーレイアウトについて学びましょう。

WebページにHTML要素を正確に配置する方法 画像ソフトPhotoShopのレイヤーと同じように、各レイヤーを正確に配置して操作することができます。 CSS は、レイヤー レイアウト モデルをサポートするための一連の配置プロパティを定義します。

レイヤーモデルには 3 つの形式があります:

1. 絶対位置決め (位置: 絶対)
2. 相対位置決め (位置: 相対)
3. 固定位置決め (位置: 固定)

レイヤーモデル -- 絶対位置決め

要素設定レイヤー モデルで絶対位置を設定するには、position:absolute (絶対位置を示す) を設定する必要があります。このステートメントの機能は、要素をドキュメント フローの外にドラッグし、左、右を使用することです。 、top、bottom 属性をそれに最も近いものにします。 位置決め属性 を持つブロックを含む親は、絶対位置決めを実行します。そのような包含ブロックが存在しない場合、それは body 要素に対して相対的、つまりブラウザ ウィンドウに対して相対的になります。

レイヤー モデル -- 相対位置

レイヤー モデルで要素の相対位置を設定したい場合は、position:relative (相対位置を示す) を設定する必要があります。これにより、通常のドキュメント フロー内の要素が決定されます。 left、right、top、bottom のオフセット位置。相対位置決めのプロセスでは、まず静的 (フロート) モードで要素を生成し (要素はレイヤーのように浮遊します)、次に前の位置に対して相対的に移動します。移動の方向と振幅は左と右によって決まります。 、top、bottom 属性では、オフセット前の位置は変更されません。

.div1 {        position: relative;        top: 20px;        left: 100px;        width: 200px;        height: 200px;         border: 1px solid red;    }

    <div class="div1"></div><span>相对定位元素偏移前的位置会保留不动。</span>

2.png

レンダリングから、div 要素が前の位置に対してオフセットされているにもかかわらず、div 要素の前の位置は保持されていることが明確にわかります。そのため、後続のspan 要素が表示されます。 div 要素の前の位置の後ろ。

レイヤーモデル -- 固定位置

fixed: 絶対位置タイプと同様に固定位置を示しますが、その相対移動座標はビュー (画面内の Web ページウィンドウ) そのものです。ビュー自体は固定されているため、画面上でブラウザ ウィンドウの画面位置を移動したり、ブラウザ ウィンドウの表示サイズを変更したりしない限り、ブラウザ ウィンドウのスクロール バーがスクロールしてもビューが変化することはありません。常にブラウザ ウィンドウ内のビューの特定の位置にあり、ドキュメントの流れに影響されません。これは、background-attachment:fixed 属性と同じ機能を持ちます。

Relative は Absolute と組み合わせて使用​​されます

position:absolute を使用して設定された要素をブラウザ (body) を基準にして配置するという絶対的な配置方法を学習した後、他の要素に対して相対的に配置できるかどうか考えたことはありますか? ?答えはもちろん「はい」です。役立つために、position:relative を使用しますが、次の仕様に従う必要があります:

1. 参照位置にある要素は、相対的に位置する要素の先行要素である必要があります:

   <div class="box"><!--参照定位的元素--> <img src="3.jpg" style="width:200px; height: 200px; "> <div class="text">Relative与Absolute组合使用</div><!--相对定位元素--></div>

   上記のコードから、ボックスが次のとおりであることがわかります。テキストの親要素 (親要素はもちろん上級要素でもあります)。

2. 参照位置決め要素は、position:relative;

   を追加する必要があります

   .box {     position: relative;     width: 200px;     height: 200px;     border: 1px solid red; }

3. 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

   .text {     position: absolute;     bottom: 0px;     border: 1px solid #e8e8e8; }

   5.png