CSSレイアウト レイアウトモデル

今回はCSSレイアウトのレイアウトモデルをお届けします。CSSレイアウトモデルの注意事項とは何ですか?実際の事例を見てみましょう。

Web ページでは、要素には 3 つのレイアウト モデルがあります:
1. フロー モデル (Flow)
2. フロート モデル (Float)
3. フロー モデル (Flow)

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

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

まず、ブロック要素は垂直方向に拡張され、含まれる要素内で上から下に順番に配置されます。これは、デフォルトでは、ブロック要素の幅がすべて 100% であるためです。実際、ブロック要素はすべて行の形式で位置を占めます。

(各付箋には元のデフォルトの幅と高さが表示されます)

2 番目のポイント、フロー モデルでは、インライン要素は、含まれている要素内で左から右に水平に表示されます。 (

インライン要素

は、行を占めるブロック要素ほど支配的ではありません)2. フローティングモデル (Float)

デフォルトではどの要素もフローティングにできませんが、CSS

div{float :left を使用してフローティングとして定義できます。 ;} div{float:right;}

レイアウトする div ごとに異なるフローティング メソッドを設定できます。

3. レイヤー モデル (レイヤー)

レイヤー モデルには、次の 3 つの形式があります。 (位置: 固定)

相対位置

レイヤーモデルで要素の相対位置を設定したい場合は、法線での要素の位置を決定するposition:relative(相対位置を示す)を設定する必要があります。ストリーム内の left、right、top、bottom のオフセット位置を使用してドキュメントを作成します。

前の位置を基準にして移動します。オフセット前の位置は変更されません。相対配置を使用する場合、要素がオフセットされていても、オフセットされる前のスペースを占有します。 絶対配置

レイヤーモデルで要素の絶対配置を設定したい場合は、position:absolute (絶対配置を示す) を設定し、要素をドキュメントフローの外にドラッグして、左側のright、top、bottom 属性は相対位置です。位置決め属性を持つブロックを含む最も近い親が絶対的に配置されます。そのような包含ブロックがない場合 (つまり、その前の div に位置決め属性が設定されていない場合)、それは body 要素に対して、つまりブラウザ ウィンドウに対して相対的になります。

絶対配置に設定された要素はドキュメント フロー内のスペースを占有しません。要素が絶対配置に設定されている場合、ドキュメント フロー内のその位置は削除されます。

その要素を設定するには z-index を使用できます。積み重ねる順番。

絶対配置では、要素がドキュメント フローから外されるため、通常のドキュメント フロー内の要素のレイアウトは、絶対配置された要素がドキュメント フロー内に存在しない場合と同じになります。要素は無視され、元のスペースが埋められます。絶対配置ボックスはドキュメント フローから独立しているため、ページ上の他の要素を覆うことができます。

フローティング要素の位置は通常のドキュメント フローに基づいており、ドキュメント フローから抽出され、可能な限り左側または右側に移動され、テキスト コンテンツがフローティング要素を囲みます。これはドキュメント フローの表示を変更するだけであり、ドキュメント フローから切り離されるわけではありません。これを理解すると、いつ配置を使用し、いつフローティングを使用するかを簡単に把握できます。

固定位置

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

#div1{
position:fixed;
    bottom:0;
    right:0
}  (始终在屏幕由下端有一个div框，会一直跟着滚动条走)

相対配置は絶対配置と組み合わせることができます。原理は、親 div が配置属性を定義している限り、子 div は親 div の位置に応じて再配置されますこの方法は習得できたと思います。これらの事例を読んだ後は、php 中国語 Web サイトの他の関連記事にも注目してください。

関連記事:

layer.photos() が画像アドレスを非同期に変更した後の表示異常の問題を解決する方法

angularJs リストデータがレンダリングされたかどうかを監視する方法

ES6 "クラス」とオブジェクト指向の関係

以上がCSSレイアウト レイアウトモデルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。