HTMLの3つのレイアウトとは何ですか?

フロー レイアウト (HTML Web ページのデフォルト レイアウト)

(ビデオ チュートリアルの共有: html ビデオ チュートリアル)

機能 :

1. デフォルトではブロック要素の幅が 100% であるため、ブロック要素は、それを含む要素内で上から下に垂直に拡張されます。

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

フローティング レイアウト (フロート)

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

次のように

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

3. レイヤー モデル

特徴: div を別の div の上に置きたい場合は、絶対配置を使用して完成させる必要があります。レイヤー モデル相対、絶対、および固定の 3 つの位置決めメソッドは、position: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 チュートリアル

以上がHTMLの3つのレイアウトとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。