Web フロントエンドチュートリアル CSS レイアウトの例-htmlチュートリアル-php.cn

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カラムの実装方法

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ドキュメント:

レイアウト手順:

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

メインラップの幅を 100% に設定し、2 つのサイドバーの幅を設定します。

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

左右のサブパネル用のスペースを残すようにメインのマージン値を設定します。

CSSリスト:

いくつかの説明

聖杯はパディングを使用しますが、二重の飛行翼はマージンを使用します。これにより、聖杯レイアウトのメインの最小幅がこれより小さくできないという欠点が解決されます。左の列。

両翼レイアウトでは、相対的なレイアウトと対応する左右の値を設定する必要はありません。

相対レイアウトを導入することで、例えば右列にposition: left: 190px; を設定することで、3カラムレイアウトの様々な組み合わせが実現できます。

2カラムの実装方法

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

以下は 5 つのレイアウトのフレックスレイアウトコードです:

DOM ドキュメント:

CSS リスト

前述のいくつかの従来のレイアウトスキームと比較すると、フレックスレイアウトコードは非常に優れています。シンプルかつ非常に多用途で、シンプルな 3 行の CSS を使用して 5 つの一般的なレイアウトを実現します。

概要

従来のレイアウト方法は、表示属性 + 位置属性 + 浮動小数点属性に依存しており、いくつかの特殊効果を実現するためのロジックは特に複雑で面倒です。垂直センタリングなど。フレックスレイアウトのフレックスコンテナーは、実際の利用可能なスペースに応じてサブ要素のアスペクト比と順序を動的に調整できるため、要素は利用可能なスペースを可能な限り活用しながら、それを超えないように縮小することもできます。フレックスレイアウトは、シンプルで完全な応答性の高いレイアウトソリューションを提供します。

以上がWeb フロントエンドチュートリアル CSS レイアウトの例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。