CSSの配置方法にはどのようなものがありますか?

CSS の配置方法には次の 5 種類があります。 1. 浮動配置 (float)。 2. static (静的配置); 配置を行わない場合、要素は通常のフローに表示されます。 3. 相対 (相対位置決め); 要素は通常の文書フローから分離されます。 4. Absolute (絶対位置決め)。 5. 固定 (固定位置)。

このチュートリアルの動作環境: Windows 7 システム、CSS3 バージョン、Dell G3 コンピューター。

Web ページのさまざまな要素を柔軟に配置することで、複雑な Web ページのレイアウトを実現します Web ページ内のさまざまな要素の配置には、それぞれ独自の特徴があります。 CSSのいくつかの配置方法を見てみましょう。

float 配置 (浮動配置):

この配置方法は非常に簡単で、浮動方向を指定するだけです (例: float:left; を意味します)。この要素は左側に配置されます)、その位置は親要素コンテナーに対して相対的です;

要素が float に設定されている場合、そのすぐ後ろの要素は float の影響を受けるため、次のようになります。要素は影響を受けないようにする必要があります。後でフロートをクリアする必要があります (クリア: 両方; および他の方法も使用できます)。隣接する 2 つの要素に同じフロートが設定されている場合、2 つの要素は順番に隣接して配置されます。この配置により、要素がドキュメント フローから取り出されます。

位置位置決め​​:

位置位置決め​​は、指定された位置の位置決めです。一般的に使用されるものは次のとおりです:

1. static (静的位置決め):

配置方法を指定しない場合、デフォルトの配置方法は静的です。つまり、文書の書き込みレイアウトに従って適切な場所に自動的に割り当てられます。この配置方法は、左の場合、マージンを使用して位置を変更します。 、top、z-Index およびその他の設定値は無効です。この配置はドキュメント フローから逸脱しません;

2. 相対配置 (相対配置):

これ位置決めは相対位置決めであり、指定された要素が通常の位置に対してオフセットされるように、左と上に等しい値を設定することで設定できます。この位置決めはドキュメント フローから逸脱するものではありません;

3。絶対配置 (絶対配置):

この配置は、top を設定することで行われます。 、right、bottom、left のオフセット値は、静的配置 (この配置) 以外の最初の親要素を基準に配置されます。通常、親要素を相対位置に設定するのと組み合わせて使用​​されます)。親要素がない場合、その参照は本文であり、ドキュメント フローから分離されます。

4. 固定 (固定位置) ):

この配置方法はドキュメント全体を基準にしています。各方向を基準に設定するだけで済みます。オフセット値により、要素をページ上の固定位置に固定できます。通常、表示するために使用されます。いくつかのプロンプト情報を提供し、ドキュメント フローから離れます;

(学習ビデオ共有: css ビデオ チュートリアル)

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