CSS レイアウト モデルの簡単な分析 1

CSS は Web ページの見栄えを決めるものであり、レイアウトは CSS の重要な部分です。いくつかの一般的なレイアウトを分析してみましょう。

フローモデル

フロー モデルは、Web ページ レイアウトのデフォルト モードであり、最も一般的なレイアウト モードです。

2 つの特徴があります。

1. ブロック要素は、含まれる要素内で上から下の順に垂直に配置されます。一般的なブロック要素には、div、p、ul、ol、h1~h6、アドレスなどが含まれます

2. インライン要素は、含まれる要素内で左から右に水平に表示されます。一般的なインライン要素には、a、span、img、input、textarea などが含まれます。

フローティングモデル

float モデルとは、CSS を使用してブロック要素を float として定義することを指します。使用法: float:left/right/none

レイヤーモデル

CSS は、レイアウト モデルをサポートするための一連の位置決め属性 (位置) を定義します。

1. 静的位置決め 設定位置: 静的

特別な配置はなく、オブジェクトは通常のドキュメント フローに従います。上、右、下、左などの属性は適用されません

2. 絶対位置決め 設定位置:絶対

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

リーリー

3. 相対位置設定 設定位置: 相対

オブジェクトは通常のドキュメント フローに従いますが、その位置は上、右、下、左などの属性によってさらに決定できます。これは静的属性とも異なります。

4.固定位置設定位置:固定

固定配置と絶対配置の違いは、固定で配置される要素は常にビュー自体 (画面上の Web ページ ウィンドウ) であるのに対し、絶対は配置属性を持つ親要素を参照することです。次のコード:

リーリー

次のセクションでは、レイアウトの配置とその他のプロパティ: z-index、display、float、clear、visibility、clip、overflow、overflow-x、overflow-y について説明します

CSS レイアウト モデル 2 の簡単な分析