HTML Web ページのレイアウト方法にはどのようなものがありますか?

HTMLの3つのレイアウト方法のまとめ

1 通常フロー

通常フローとも呼ばれ、ブラウザのデフォルトのレイアウト方法です。ほとんどの場合、通常のフローは要素が Web ページ上にレンダリングされる方法です。すべての HTML は、ブロック ボックス (ブロック レベル要素) またはインライン ボックス (インライン要素) 内にあります。ブラウザが HTML ドキュメントのレンダリングを開始すると、要素が必要とするスペースをウィンドウの上部から始めてドキュメントのコンテンツ全体に割り当てます。ドキュメントのサイズが CSS によって特に制限されていない限り、ブラウザはコンテンツ全体が収まるようにドキュメントを垂直方向に拡張します。 新しいブロックレベル要素はそれぞれ新しい行としてレンダリングされます。インライン要素 (インライン要素/インライン ブロック レベル) は、現在の行が境界に達するまで順番に水平方向にレンダリングされ、その後、次の行に切り替わって垂直方向にレンダリングされます。

2 配置フロー

1> 絶対、絶対配置: 絶対配置要素の位置は、それに最も近い配置 (配置フロー) の祖先を基準とします (相対/絶対/固定) ) 要素によって決まります。 要素に位置決めされた祖先がない場合、その位置は最初の包含ブロック (ボディ) を基準とします。

要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

絶対に配置された要素は標準フローの範囲外です。標準ストリームではスペースを占有しません。

絶対配置要素は、ブロックレベル要素/インライン要素/インラインブロックレベル要素を区別しません。

絶対配置要素が参照点として本文を使用する場合、実際には、Web ページ全体の幅と高さではなく、Web ページの最初の画面の幅と高さが参照点として使用されます。位置決めされた要素は、ページのスクロールに合わせてスクロールします。

ボックスが絶対に配置されている場合、ボックス自体を中央に配置するには margin: 0 auto を使用できません。 left: 50% を使用できます。 - 要素の幅を中央に半分に設定します

2> ; 固定、固定位置決め: 固定位置決めは、絶対位置決めの一種として理解できます。固定配置された要素の位置は、ブラウザ ウィンドウを基準にして決定されます。これにより、ウィンドウ内の固定位置に常に表示される要素を作成できます。

要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

固定配置要素は標準フローの外にあり、標準フロー内のスペースを占有しません。それは標準ストリームから削除されたものとして理解できます。

固定配置要素は、ブロックレベル要素/インライン要素/インラインブロックレベル要素を区別しません。

E6 以前のバージョンは固定位置をサポートしていないため、JavaScript を使用して解決できます。

3> inherit、継承: 親要素のposition属性の値を継承します。

4> relative、相対位置決め: 相対位置決めとは、通常のフロー内の以前の位置を基準にして移動することを意味します。つまり、通常の位置に対して相対的に配置されます。

相対配置を使用する場合、要素が移動されるかどうかに関係なく、要素は元のスペースを占有するため、要素を移動すると他のボックスを覆うことになります。

相対配置では、同じ方向の配置属性は 1 つだけ使用できます。

相対配置は標準的なフローから逸脱しないため、相対配置ではブロックレベル要素/インライン要素/インラインブロックレベル要素を区別してください。また、相対的に配置された要素は標準フロー内の位置を占めるため、相対的に配置された要素のマージン/パディングなどの属性の設定は、標準フローのレイアウトに影響します。

5> static、静的位置決め: デフォルト値、位置決めなし、要素は通常のフロー、つまり上、下、左、右、または z-index の宣言を無視した通常のフローに表示されます。

3 フローティング フロー

フローティング フローの組版方法は 1 つだけで、要素を左揃えまたは右揃えに設定することしかできません。最初にフローティングされた要素が前面に表示され、後からフローティングされた要素が背面に表示されます。

フローティングフローには中心合わせがなく、中心値もありません。 Margin: 0 auto はフローティング ストリームでは使用できません。

フローティングフローでは、ブロックレベル要素/インライン要素/インラインブロックレベル要素は区別されません。ブロックレベル要素/インライン要素/インラインブロックレベル要素のいずれであっても、水平方向に植字することができます。幅と高さの両方を設定できます。

要素がフロートに設定されている場合、要素は標準フロー (標準外) から分離され、標準フロー内のスペースを占有しません。この時点で次の要素がフローティングでない場合、この要素はこの時点で次の要素をカバーします。

1> inherit、継承: 親要素の float 属性の値を継承します。

2> left、左フローティング: 要素は左にフローティングします。先に浮いたものが左側、後から浮いたものが右側です。

3> none、フローティングではありません: デフォルト値。

4> right、右フロート: 要素は右にフロートします。先に浮いたものが右側、後から浮いたものが左側になります。

以上がHTML Web ページのレイアウト方法にはどのようなものがありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。