CSSのレイアウト方法にはどのようなものがあるのでしょうか？ CSSのレイアウト方法まとめ

CSS ページ レイアウトは Web ページで非常に役立ちます。CSS ページ レイアウトは、通常のレイアウト フロー、周囲の要素、親コンテナー、またはメイン ビューポート/ウィンドウに対する Web ページの位置を制御できます。 CSS のページ レイアウト方法を詳しく見てみましょう。

CSS で左右のレイアウトを実装する

CSS で左右のレイアウトを実装するには、次の 6 つの方法があります:

1. table の実装

table タグには、left と right を実装する属性を含めることができます。右のレイアウト、tr は行を表し、td は列を表します。td を tr に追加すると、ボックスの左右のレイアウトを実現できます

2。inline-block 属性は行の間にあります。 -レベル要素 (display:inline) とブロックレベル要素 (display: block) は、行レベル要素のように水平にレイアウトすることも、ブロックレベル要素のように幅と高さの属性を設定できるため、レイアウトすることもできます左右に出ます。

3. Float は、親ラベルのドキュメント フローからブロック領域を分離する左右のレイアウトを実装します

。 left 属性値により、領域が親ラベル領域の左境界に向かって配置されます。 right 属性値によりエリアが作成されます。エリア ブロックは親ラベルの右端に配置されます。この場合、この属性を使用して左右のレイアウトを実現できます。

floatレイアウトは後続のノードのレイアウトに千鳥配置を採用しますが、inline-blockは通常のレイアウトを採用します。

4. flexbox 属性は左右のレイアウトを実装します

flexbox フレキシブル ボックス レイアウト、display:box; このレイアウトは主にモバイル フロントエンド開発に使用されます。

5. Float+margin は左右のレイアウトを実装します

float は、フローティングブロックと並列する兄弟要素に通常のフロー領域が設定されている場合、フローティングブロックは左右に配置されます。同レベルのフローエリアの境界では、フローティングブロックのみがエリアブロックのレイアウトに影響を与えるため、この時点でフローティングブロックの影響をクリアする必要があります。通常のフローエリアブロックの外側のボックスのマージンがフローティングブロックの幅と等しい場合、影響を取り除くことができます。

6. 位置: 絶対的な左右のレイアウト

絶対的な位置決めにより、ドキュメントの流れから外れるレイアウト現象が発生します。 Absolute は任意の位置の要素をカバーでき、通常のフローのレイアウトには影響しませんが、シャドウイングが発生します。

CSS の左、中央、右のレイアウト

3 列のアダプティブ レイアウト: 両側は固定幅、中央はアダプティブ ブロック幅。

1. 絶対配置方法

絶対配置はドキュメントの流れから外れるので、後ろの中央が自然に流れてしまうので、余白属性を使います。左側と右側の要素。これにより、中央の要素が画面の幅に適応するようになります。

2. セルフフローティングメソッドを使用します

float を使用すると、左側と右側の要素がドキュメントフローから外れます。通常のドキュメントでは中央の要素が使用されます。マージンを使用して左右のマージンを指定します。同時に、親ボックスは子ボックスのオーバーフローを防ぐために overflow: auto を設定します

聖杯レイアウトの原則はネガティブマージン方式です。 Holy Grail レイアウトを使用するには、まず中心要素の外側に p を含める必要があります。p を含めるには、BFC を形成するように float 属性を設定し、幅を設定する必要があります。この幅は、マージンの負の値と一致する必要があります。左側のブロック。

CSS中央揃えレイアウト

水平中央揃えインライン要素(inline)の場合: text-align: center;

ブロックレベル要素(block)の場合:幅とマージン-左とマージンを設定します-right auto に設定され、width の代わりに max-width が使用されます。 複数のブロックレベル要素の場合: 親要素に text-align: center; を設定し、子要素に display: inline-block; (vertical-alinga:top) を使用します。 flex ; justify-content:center

垂直方向に中央揃え

インライン要素の場合(インライン)

単一行: 上下のパディングを等しく設定します(または行の高さと高さを等しく設定します)

複数行: 上部と下部のパディングを等しく設定する; または、display: table-cell; およびvertical-align: middle; を設定するか、疑似要素を使用します ブロックレベルの要素の場合: (以下の最初の 2 つのオプションでは、親要素は相対レイアウトを使用する必要があります)

既知の高さ: 子要素は絶対レイアウト top: 50%; を使用し、次に負の margin-top を使用して子要素を半分の高さだけ引き上げます。高さ

不明な高さ: 子要素は絶対レイアウト位置: 絶対; トップ: 50%; 変換: 変換 Y(-50%);

フレックスボックスを使用: 方向を選択し、コンテンツ: センター;

水平方向と垂直方向の中央揃えのレイアウトを実現します

高さと幅を修正します: 最初に絶対レイアウトの上: 50%、左: 50% を使用し、次に幅と高さの半分に等しい負のマージンを使用して子要素を引き戻します

高さと幅は不明です。最初に絶対レイアウトを使用します。top: 50%; left: 50%; 次に、transform: translation(-50%, -50%);を設定します。

Flexbox を使用します: justify-content: align; -アイテム: センター。

box-sizing

要素を box-sizing: border-box; に設定すると、要素のパディングとボーダーの幅は増加しなくなります。

幅のパーセント

パーセンテージは、含まれるブロックに対する相対的な測定単位です。これは画像やボックス モジュールに役立ちます。たとえば、ウィンドウが縮小された場合でも、画像の幅は常にコンテナの幅の 50% になります。

css は inline-block レイアウトを実装します

inline-block 要素は垂直方向のセンタリングに影響し、vertical-align: top を追加します。

おすすめ関連記事:

CSSレイアウト 聖杯レイアウト&双翼レイアウト_html/css_WEB-ITnose

CSSレイアウト レイアウトモデル

CSSレイアウトのスキルとは

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