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

1. 流動的なレイアウト (HTML Web ページのデフォルトのレイアウト方法)

特徴:

1. ブロック要素は、デフォルトでは、含まれる要素内で上から下に順番に垂直に拡張され、配置されます。 state 以下では、ブロック要素の幅は 100% です。

2. インライン要素は、含まれる要素内で左から右に水平に表示されます。 (インライン要素はブロック要素ほど支配的ではなく、1 行を占有します。)

2. フロート レイアウト (float)

特徴: デフォルトのレイアウトでは、ブロック要素は 1 行を占有するほど支配的です。 2 つの Block 要素を並べて表示したい。これを実現するには、float を使用する必要があります。

以下の通り

p{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

3. レイヤーモデル

特徴: p を別の p の上に置きたい場合、それを完成させるために絶対配置を使用する必要があります。相対と絶対。固定

absolute

このステートメントの機能は、要素をドキュメントフローの外にドラッグすることです
。 left、right、top、bottom 属性 位置決め属性を持つブロックを含む最も近い親を基準として絶対的に配置されます。
そのような包含ブロックが存在しない場合、それは body 要素に対して相対的、つまりブラウザウィンドウに対して相対的になります。

relative

レイヤーモデルで要素の相対位置を設定したい場合は、position:relative（相対位置を示す）を設定する必要があります。
通常のドキュメントフロー内の要素を決定します。 left、right、top、bottom 属性のオフセット位置。
相対位置決めのプロセスは、まず静的 (フロート) モードで要素を生成し (要素はレイヤーのように浮動します)、その後、前の位置に対して相対的に移動します。移動の方向と振幅は左、右、です。 top、bottom のプロパティが決定され、オフセット前の位置は変更されません。

fixed

fixed: 絶対配置タイプに似た固定配置を示しますが、その相対移動座標はビュー(画面内のWebページウィンドウ)そのものです。
ビュー自体は固定されているため、ブラウザウィンドウのスクロールバーがスクロールしてもビューは変わりません。
画面内でブラウザウィンドウの画面位置を移動したり、ブラウザウィンドウの表示サイズを変更しない限り、
そのため要素は固定配置されますこれは常にブラウザ ウィンドウ内のビューのどこかに配置され、ドキュメントのフローの影響を受けません。これは、background-attachment:fixed 属性と同じ機能を持ちます。

注

z-index 属性を使用する場合、position 属性を使用する要素のみが z-index 属性を持ちます。 Position 属性を使用しない要素には z-index 属性がないため、設定しても無駄です

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