一般的な HTML レイアウトのタイプは何ですか? htmlの3つのレイアウト特性の分析-htmlチュートリアル-php.cn

一般的な HTML レイアウトのタイプは何ですか? htmlの3つのレイアウト特性の分析

不言

リリース： 2018-08-04 16:51:05

オリジナル

12415 人が閲覧しました

HTML レイアウトの一般的なタイプは何ですか? HTML には、流体レイアウト、フローティングレイアウト、レイヤーモデルの 3 つのレイアウト方法があり、それぞれに独自の特徴があります。この記事では、HTML の 3 つのレイアウト方法の特徴について簡単に説明します。

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

特徴:

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

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

2. Float レイアウト (float)

特徴: デフォルトのレイアウトでは、ブロック要素は 1 行を占有するほど横暴です。 want to 2 つのブロック要素が並んで表示されます。これを実現するには、float を使用する必要があります。

以下の通り

3. レイヤーモデル

特徴: div を別の div の上に置きたい場合、レイヤーモデルの 3 つの配置方法を使用する必要があります。は、相対と絶対です。固定

絶対配置 (絶対)

このステートメントの機能は、要素をドキュメントフローの外にドラッグすることです。 left、right、top、bottom 属性を相対に設定します。位置決め属性を持つブロックを含む最も近い親にブロックを絶対的に配置します。

そのような包含ブロックが存在しない場合、それは body 要素に対して相対的、つまりブラウザウィンドウに対して相対的になります。

相対位置(relative)

要素のレイヤーモデルで相対位置を設定したい場合は、position:relative(相対位置を示す)を設定する必要があります。

これは、要素の位置を決定しますストリーム内の左、右、上、下属性のオフセット位置による通常のドキュメント。

相対配置のプロセスは、まず静的 (フロート) モードで要素を生成し (要素はレイヤーのように浮動します)、その後、前の位置に対して相対的に移動します。移動の方向と振幅は左、右、です。 top、bottom のプロパティが決定され、オフセット前の位置は変更されません。

固定配置(fixed)

fixed: 絶対配置タイプと同様に固定配置を示しますが、その相対移動座標はビュー(画面内のWebページウィンドウ)そのものです。

ビュー自体は固定されているため、ブラウザウィンドウのスクロールバーがスクロールしてもビューは変わりません。

画面内でブラウザウィンドウの画面位置を移動したり、ブラウザウィンドウの表示サイズを変更しない限り、
そのため要素は固定配置されますこれは常にブラウザウィンドウ内のビューのどこかに配置され、ドキュメントのフローの影響を受けません。これは、background-attachment:fixed 属性と同じ機能を持ちます。

注:

z-index 属性を使用する場合、position 属性を使用する要素のみが z-index 属性を持ちます。 Position 属性を使用しない要素には z-index 属性がありませんので、設定しても無駄ですおすすめ関連記事:

html+css レイアウトの 3 つの方法 (自然なレイアウト/フローレイアウト/位置指定レイアウト) )_HTML/Xhtml _Web ページ制作

HTML と HTML を使用して共通のレイアウトを実現_html/css_WEB-ITnose

以上が一般的な HTML レイアウトのタイプは何ですか? htmlの3つのレイアウト特性の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。