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

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

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

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

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

位置: 相対

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

フローモデル

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

4 つの典型的な機(jī)能があります:

1。デフォルトでは、ブロック要素の幅はすべて 100% であるため、ブロック要素は含まれる要素內(nèi)で上から下に順?lè)舜怪堡藪垙垽丹?、分散されます。実際、ブロック要素は、要素に含まれるコンテンツの量に関係なく、また要素の幅をどれほど狹く設(shè)定しても、行の形式で位置を占めます。

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

4. フローティング要素のマージンは重なりません。フローティング要素がブロック要素と接觸した場(chǎng)合、その後ろにある要素が重なるかどうかを決定します。プログラミングの観點(diǎn)から見(jiàn)ると、次の要素の表示方法を決定するよりも、すでに構(gòu)築されている DOM ツリーを変更する方が効率的です。フローティング要素がブロック要素の親要素である場(chǎng)合、上記の規(guī)則に従って重なる必要がありますが、フローティング要素は內(nèi)部の高さと幅を自動(dòng)的に計(jì)算するため、結(jié)果として得られるマージンは重なりません。

フロートモデル

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

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

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

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

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

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

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

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

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

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

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

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

注: 個(gè)人的には、この屬性の中國(guó)語(yǔ)名は「クリーン」と翻訳する方が適切です。これは、現(xiàn)在の要素が解析されるときに、

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

フローティング要素は互いにネストでき、ネストのルールはフロー要素のネストと同じです。浮動(dòng)要素を含む要素は、浮動(dòng)子要素を含むように高さと幅を常に自動(dòng)的に調(diào)整します。 「float」を定義する要素は、要素內(nèi)のコンテンツに適したものとなるように、要素內(nèi)のフローティング要素の幅と高さを自動(dòng)的に計(jì)算します。この屬性が定義されていない場(chǎng)合、幅と高さが自動(dòng)的に計(jì)算されず、親要素の幅と高さが異常に表示されます。親要素の overflow 屬性を "auto" として 定義することで、要素の幅と高さを自動(dòng)的に拡張することもできます。

一般に純粋なフロー要素または純粋なフローティング要素のネストを処理する方が簡(jiǎn)単ですが、フロー要素內(nèi)に

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

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

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

ポジショニングタイプ

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

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

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

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

left、right によって決定されます。 、top、bottomの屬性が確認(rèn)され、オフセット前の要素の形狀と位置が保持されます