Web フロントエンド チュートリアル CSS レイアウトの例

CSS レイアウト

レイアウトは CSS の重要な部分であり、一般的に使用される水平方向の中央揃えと垂直方向の中央揃えの方法、単一列レイアウト、複数列のレイアウトなど、CSS レイアウトの一般的なテクニックをまとめています。さまざまな実装方法 (従来のボックス モデル レイアウトと比較的新しいフレックス レイアウトの実装を含む) が、困っている友人に少しでも役立つことを願っています。

目次

1. 一般的に使用される中央揃え方法: 水平中央揃え、垂直中央揃え、

2. 1 列レイアウト

3. フロート + マージン、位置 + マージン、ホーリーグレイル レイアウト (フロート + ネガティブ マージン)、ダブル フライング ウィング レイアウト (フロート + ネガティブ マージン)、フレックス レイアウト

html5css3 やその他の Web フロントエンド テクノロジを学び、伝えたい、フロントエンドの側面について詳しく知りたい場合QQ 学習グループ 27062964 に参加して、一緒に学習してコミュニケーションをとり、共有できる学習教材とソース コードをご利用ください。または、リンクをクリックして QQ グループに直接参加してください:

概要

1. よく使用されるセンタリング方法

レイアウトではセンタリングが非常に一般的です。DOM ドキュメントの構造と子要素は次のとおりであると仮定します。親要素の中央に配置する必要があります:

水平方向に中央揃え

子要素がインライン要素であるかブロック要素であるか、幅が確定しているか不定であるか、採用されるレイアウトプランが異なります。以下で分析してみましょう:

インライン要素: 親要素に text-align:center を設定します。

固定幅のブロック要素: 左右のマージン値を auto に設定します。

可変幅のブロック要素: を設定します。子要素を表示:inline に設定し、次に text-align:center; を設定します

親要素の一般的な解決策: フレックス レイアウト、display:flex;justify-content:center; を設定します

親要素を中心に垂直に配置します

垂直子要素の中央揃えは 1 行のインライン テキスト、複数行のインライン テキスト、およびブロック要素の場合は異なるソリューションを使用します。

親要素は確実で、子要素はインライン テキストの 1 行です。親要素の高さを行の高さ line-height に設定します。

親要素は確実で、子要素は複数行です。 line inline text: 親要素の表示: table-cell または inline -block を設定し、vertical-align:middle; を設定します。

Block 要素: 子要素のposition:fixed (absolute) を設定し、margin:auto を設定します。 ;

一般的な解決策: フレックス レイアウト、親要素に {display:flex; を設定します。

2. 単一列レイアウト

特徴: 固定幅、水平中央揃え

2 つの一般的な単一列レイアウトがあります:

1 つは、ヘッダー、コンテンツ、およびフッターの幅がすべて同じであることです。 、通常、スペース全体を占めることはありません。ブラウザの最も広い幅ですが、ブラウザが最大幅よりも小さくなると、幅が適応されます。

1つは、ヘッダーとフッターの幅はブラウザーの幅ですが、ヘッダーとフッターのコンテンツとコンテンツはブラウザーの幅を満たさないということです。

最初のタイプでは、ヘッダー、コンテンツ、フッターの幅または最大幅を一律に設定し、margin:auto を使用して中央揃えを実現します。

DOM document:

CSS list:

2 番目のタイプでは、ヘッダーとフッターのコンテンツ幅は 100% ですが、ヘッダーとフッターのコンテンツ領域とコンテンツは設定されますmax-width に設定し、margin:auto によってセンタリングを実現します。

DOM ドキュメント:

CSS リスト:

3. 2 列と 3 列のレイアウト

II 列レイアウト機能サイドバー固定幅、メイン列の適応幅。 3 列レイアウトは、両側の 2 つの固定幅列と中央の列の適応幅によって特徴付けられます。

2カラムレイアウトと3カラムレイアウトを併記しているのは、2カラムレイアウトは3カラムレイアウトからサイドバーを1つ除いたものとみなすことができ、レイアウトの考え方が似ているためです。従来の実装方法については、上の図の最初の 3 つのレイアウト、サイド列を含む古典的な 2 列レイアウト、および左側と右側の列を含む 3 列レイアウトについて主に説明します。フレックス レイアウトの場合は、次の 5 つのレイアウトについて説明します。上の写真が実装されています。

a. float+margin

原理の説明: 2 つのサイドバーをそれぞれ左右にフロートするように設定し、中央の列の幅はブラウザー ウィンドウに応じて調整されます。

DOMドキュメント:

レイアウト手順:

両側のサイドバーの幅を設定し、左の列に左のフロートを追加し、右の列にフロートを追加します。

メインパネルの左右のマージンを設定します。 margin-left の値は左の列の幅、margin-right の値は右の列の幅です。

CSS リスト:

いくつかの指示:

* DOM ドキュメントの書き込み順序に注意してください。最初にサイドカラムを記述し、次にメインパネルを置き換えます。次の列（聖杯レイアウトと両翼レイアウトが使用されます）。 * このレイアウト方法は比較的シンプルで明確ですが、欠点は、より重要なメイン パネルではなくサイドバーが最初にレンダリングされることです。

2カラムの実装方法

左側にサイドバーがある2カラムレイアウトの場合は、右側のカラムを削除し、メインパネルの右マージンの値を設定しません。その他の操作は同じです。逆に。

b. 位置 + マージン

原理の説明: 絶対位置決めによって 2 つの側面の列を固定し、マージンによって 2 つの側面の列のためのスペースを作成し、中央の列は適応的です。

DOMドキュメント:

レイアウト手順:

両側のサイドバーの幅を設定し、配置方法を絶対配置に設定します。

列の両側の上の値を0、左の列の左の値を0、右の列の右の値を0に設定します。

メインパネルの左右のマージンを設定します。 margin-left の値は左の列の幅、margin-right の値は右の列の幅です。

CSSリスト:

いくつかのメモ:

前の方法と比較して、この方法は位置決めを通じてサイドバーの固定位置を実現します。

中央の列に最小幅制限があるか、幅のある内部要素があり、ブラウザウィンドウが十分に小さい場合、メインパネルとサイド列が重なり合います。

2カラムの実装方法

左側にサイドバーがある2カラムレイアウトの場合は、右側のカラムを削除し、メインパネルの右マージンの値を設定しません。その他の操作は同じです。逆に。

c. Holy Grail レイアウト (フロート + ネガティブ マージン + パディング + 位置)

原理の説明:

メイン パネルの幅を 100% に設定し、メイン パネルと両方のサイドバーをフローティングに設定します。このとき、サイドバーは両方ともメインパネルに押し出されてしまいます。負のマージンを介してフローティング サイドバーを引き上げます。左側の列の負のマージンは 100% であり、これはウィンドウの幅と同じです。したがって、メイン パネルの下の左側からメインと整列した左側まで続きます。右側の列がメイン パネルの下にある場合、負のマージンを負に設定し、その幅をメイン パネルの配置の右側にフローティングします。サイドバーがメインパネルのコンテンツを妨げないように、外側のレイヤーの左右のパディング値を左右のサイドバーの幅に設定して、サイドバー用のスペースを確保します。メインパネルの面積が減少します。サイドバーの負のマージンはメイン パネルに対して相対的なものであるため、2 つのサイドバーは理想的には左側と右側にドッキングせず、縮小されたメイン パネルとともに中央に近くなります。このとき、相対レイアウトを使用し、2 つのサイドバーを対応する位置に調整します。

DOM ドキュメント:

レイアウト手順:

3 つすべてが左にフロートするように設定されています。

メインの幅を100%に設定し、2つのサイドカラムの幅を設定します。

負のマージンを設定します。sub は負の左マージンを 100% に設定し、extra は負の左マージンを負の独自の幅に設定します。

メインのパディング値を設定して、左右のサブパネル用のスペースを残します。

2 つのサブパネルを相対位置に設定します。sub の左側の値は負のサブ幅、extra の右側の値は負の追加幅です。

CSS チェックリスト:

いくつかの注意事項

DOM 要素の書き込み順序を変更してはなりません。

パネルのメインコンテンツ部分が両側のサブパネルの幅より小さい場合、レイアウトが崩れます。 main の min-width 属性を設定するか、ダブルウィング レイアウトを使用することで問題を回避できます。

2カラムの実装方法

左側にサイドバーがある2カラムレイアウトの場合は、右側のカラムを削除し、メインパネルのpadding-right値を設定しないでください。その他の操作は同じです。逆に。

d. ダブル フライング ウイング レイアウト (フロート + ネガティブ マージン + マージン)

原理の説明:

ダブル フライング ウイング レイアウトとホーリー グレイル レイアウトの考え方はどちらもフローティング マージンとネガティブ マージンを使用しますが、ダブル フライング ウイング レイアウトを使用します。 Holy Grail レイアウトに基づいており、メイン要素に div のレイヤーを追加し、マージンを設定することで改善されました。2 つのサイド列の負のマージンは main-wrap に対して相対的なものであるため、main のマージン値の変更は影響しません。したがって、2 つの側面列の相対的なレイアウトを設定するステップが削除されます。

DOMドキュメント: