簡単に入力できるHTML+CSSレイアウトモデル

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

1、フロー モデル (位置: 静的)

2、フローティング モデル (フロート: 左、右)

3、レイヤー モデル (位置: 絶対) 、固定、相対)

より特殊なレイアウト方法は次のとおりです:

位置: 相対

の表示を変更せずに、「フロー モデル」または「フローティング モデル」内の要素が占めるスペースを保持します。要素モード: 「インライン」または「ブロック」。要素に元の位置を基準にして移動するように指示するだけです。ただし、あくまでもレイヤーモデルレイアウトの要素ですので、他の要素と重なる場合は非レイヤーモデルレイアウトの要素の上に表示されます。また、相対設定後は要素は完全なボックスモデルとなり、インライン要素であっても高さ、上下のパディング、上下のボーダーの設定が有効となり、その設定が占有スペースに反映されます。ドキュメントフローが優れています。

フローモデル

フローは、デフォルトの Web ページレイアウトモードです。 Position:absolute; または Position:fixed; 属性を明確に定義しておらず、float:left; または float:right; が定義されていない要素は、デフォルトでフロー レイアウト モードをレンダリングします。

4 つの典型的な機能があります:

1。デフォルトでは、ブロック要素の幅はすべて 100% であるため、ブロック要素は含まれる要素内で上から下に順番に垂直に拡張され、分散されます。実際、ブロック要素は、要素に含まれるコンテンツの量に関係なく、また要素の幅をどれほど狭く設定しても、行の形式で位置を占めます。

2. インライン要素は、含まれる要素内で左から右に水平に表示されます。この配布方法をテキスト フローと呼ぶ人もいます。テキスト フローは、本質的に、HTTP 送信方法とブラウザの解析メカニズムに密接に関係しています。 1行を超えると自動的に折り返して上から下に表示され、その後は左から右へ順次流れていきます。もちろん、読者は CSS テキスト プロパティを使用して、テキスト フローの方向を強制することができます。

4. フローティング要素のマージンは重なりません。フローティング要素がブロック要素と接触した場合、その後ろにある要素が重なるかどうかを決定します。プログラミングの観点から見ると、次の要素の表示方法を決定するよりも、すでに構築されている DOM ツリーを変更する方が効率的です。フローティング要素がブロック要素の親要素である場合、上記の規則に従って重なる必要がありますが、フローティング要素は内部の高さと幅を自動的に計算するため、結果として得られるマージンは重なりません。

フロートモデル

フロートはフローとは完全に異なる別のレイアウトモデルです。フロートのルールに従いますが、フローの潜在的な影響が見られます。デフォルトではどの要素もフローティングとして定義できませんが、CSS を使用すると、div、list、p、table、img などの要素をフローティングとして定義できます。実際には、span、strong などの要素もフローティングとして定義できます。このようなインライン要素は、float として定義することもできます。

フローティング レイアウト モデルには次の特徴があります:

1. フロートとして定義された要素は自動的にブロック表示に設定されます。このようにして、完全なボックス モデルが完成します。

2. フローティング要素の幅を指定しない場合、フローティング要素はコンテンツを含めることができる幅まで自動的に縮小されます。

3. フローティングモデルはフローモデルと競合しません。要素がフロート レイアウトとして定義されている場合、フロート要素は通常のドキュメント フローから任意に浮動することはなく、その上端はフロートとして宣言されていないときと同じ位置になります。ただし、水平方向では、そのフローティング エッジは、包含要素のエッジにできる限り近くなります (このエッジは、包含要素のパディングの内側のエッジを指します)。

4. 通常の要素と同様に、フローティング要素は常に包含要素内に配置され、レイヤー レイアウト モデルとは異なり、外側に浮いたり、要素を含む関係を破壊したりすることはありません。

5. 周囲の流動要素の問題について。フローティング要素はドキュメントとともに流れることができますが、フローティング モデルとフロー モデルの間には依然として本質的な違いがあります。フローティング要素の背後にあるインライン要素は、フロー形式でフローティング要素を囲むことができ、上のテキストと一緒にフローすることもできます。ブロック要素は異なります。浮動要素がまったく存在しないかのように、すべての浮動要素が占めるスペースを無視し、この方法でフロー モデル内の位置を決定します。

6. フローティング要素間の並列表示の問題について。 2 つ以上の隣接する要素がフローティングとして定義されている場合、それらを収容するのに十分なスペースがある場合、フローティング要素を並べて表示できます。それらの上端は同じレベルにあります。十分なスペースがない場合、後続のフローティング要素は、それを収容できる場所まで下に移動され、この下方に移動する要素が別のフロートを作成することがあります。多くのデザイナーは、流動モデル レイアウトのブロック要素を並べて表示できないという問題を解決できるため、フローティング モデルを使用して Web ページをレイアウトすることを好みます。

7. フローティングの場合、フローティング要素は前のフローティング要素にできるだけ近くなり、それによって他の非フローティング要素が脇に追いやられます。圧縮できない場合 (ブロック要素など、またはインライン要素とこのフローティング要素を同じ行に表示するのに十分なスペースがない場合)、他の要素は前の要素の直後に折り返されて表示されます。

8. 概要: フローティング要素はまだドキュメント フロー内にあり、ドキュメント フロー要素と一緒に配置されていますが、ドキュメント フローのスペースを占有しません。

クリア属性を定義できるのはブロック要素のみであり、インライン要素ではクリアは無効です。ブロック要素に「clear:both」を設定すると、解析時に浮動要素が左側または右側に表示されなくなります。ただし、

それが浮動要素である場合 (float 属性が設定されている)、後続の浮動要素は引き続きその周囲に浮動する可能性があります。フローティング要素がクリア属性を定義する場合、それは前のオブジェクトには影響せず、後続のオブジェクトにも影響を与えません。また、フローティング要素自体のレイアウト位置にのみ影響します。ここでの影響とは、他のオブジェクトの位置が積極的に変更されないことを意味します。

注: 個人的には、この属性の中国語名は「クリーン」と翻訳する方が適切です。これは、現在の要素が解析されるときに、

がどちらの側がクリーンでフローティング オブジェクトがないことを保証することを意味します。

フローティング要素は互いにネストでき、ネストのルールはフロー要素のネストと同じです。浮動要素を含む要素は、浮動子要素を含むように高さと幅を常に自動的に調整します。 「float」を定義する要素は、要素内のコンテンツに適したものとなるように、要素内のフローティング要素の幅と高さを自動的に計算します。この属性が定義されていない場合、幅と高さが自動的に計算されず、親要素の幅と高さが異常に表示されます。親要素の overflow 属性を "auto" として 定義することで、要素の幅と高さを自動的に拡張することもできます。

一般に純粋なフロー要素または純粋なフローティング要素のネストを処理する方が簡単ですが、フロー要素内に

フローティング要素を埋め込むと、このとき、表示効果は非常に複雑になります。その要素を含む要素は、それ自体のプロパティに従って表示され、子のフローティング要素の影響を受けなくなります。つまり、親要素は子のフローティング要素に適応できなくなります。高い。 フローティング要素の開始点は、包含要素内の位置によって決定されますが、フロート要素は包含要素の上に展開され、絶対配置要素と多少似ています。

レイヤーレイアウトモデルは、グラフィックイメージエディターで非常に人気のあるレイヤー編集機能から派生したもので、画像を正確に操作および編集でき、グラフィックデザインで広く使用されています。 , Web デザインの分野では、Web ページのサイズの流動性のため、レイヤー レイアウトは一般的ではありませんでした。 レイヤー レイアウト モデルをサポートするために、CSS

positioning) プロパティを定義します。要素の配置の設計思想は非常にシンプルです。これにより、ユーザーは Web ページ要素の相対位置を、要素が最初に表示される位置、または比較的近いブロック要素を基準にして定義できます。 、またはブラウザウィンドウを基準にします。

ポジショニングタイプ

1.static: 要素は、HTMLのデフォルトのフローモデルに従います。要素の配置クラスタイプが明示的に宣言されていない場合、デフォルトでこの値になります。

2.absolute: は絶対配置を意味し、要素をドキュメントフローの外にドラッグし、してからrightを使用します。 top 、bottom 属性は、位置決め属性を持つブロックを含む最も近い親を基準として絶対的に配置されます。そのような を含むブロックが存在しない場合、それは body 要素に対して相対的であり、つまりブラウザー ウィンドウに従い、そのスタック順序は z-index 属性によって定義されます。 3.

: absolute位置決めタイプに似た固定位置を示しますが、これを含むブロックはビュー(画面内のWebページウィンドウ)自体です。ビュー自体は固定されているため、画面上でブラウザウィンドウの画面位置を移動したり、ブラウザウィンドウの表示サイズを変更しない限り、ブラウザウィンドウのスクロールバーがスクロールしても変化しませんので、位置決めは固定です 要素は常にブラウザ ウィンドウ内のビューのどこかに配置され、ドキュメントのフローの影響を受けません。これは backgroundattachment:fixed; 属性と同じ機能を持ちます。

4.relative: left、right、top、bottomを介した通常のドキュメントフロー内の要素の位置を決定する相対位置を示します。 属性。 (またはフローティング モデルのオフセット位置)。相対位置決めのプロセスでは、まず static(float)

left、right によって決定されます。 、top、bottomの属性が確認され、オフセット前の要素の形状と位置が保持されます