フロントエンドプロジェクトに位置付けるいくつかの方法

フロントエンド プロジェクトでは、位置決めを実行するために位置決め属性 position を使用することはわかっていますが、具体的にはどのような属性値があるのでしょうか?一般的な位置決め方法は何ですか?今日はそれをまとめさせていただきます。

値の説明

absolute 絶対配置を使用して、静的配置以外の最初の親要素を基準にして配置される要素を生成します。要素の位置は、「left」、「top」、「right」、および「bottom」属性によって指定されます。

fixed ブラウザ ウィンドウを基準にして絶対配置された要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。

relative 通常の位置を基準にして、相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。

静的なデフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index の宣言は無視されます)。

inherit は、position 属性の値が親要素から継承されることを指定します。

まず、ここで使用するのは標準的なボックスモデルなので、誰もがそれを扱うときはボックスまたはフレームとして考える必要があります。まず最初のデフォルトパラメータ static について学びましょう。

static: 静的配置はpositionのデフォルト値であり、要素ボックスは通常どおり生成されます。つまり、配置なしで通常どおり表示されます。

absolute: 絶対配置された

要素はドキュメント フローから削除され、それを含むブロックに対して相対的に配置されます。要素は元の空間で閉じられます。ブロックレベルのボックスは、元がインライン要素であったかブロックレベル要素であったかに関係なく、要素が配置された後に生成されます。

ここでの包含ブロックは、最新の位置値が静的ではない祖先要素 (ブロック レベルまたはインライン) を指します。一般に、要素は絶対位置の要素の包含ブロックとして指定され、その位置はオフセットなしの相対に設定されます。 。

fixed: 固定位置の

要素はテキスト フローから切り離され、通常のテキストから削除され、ブラウザ ウィンドウを基準にして配置されるため、ドキュメントがスクロールしても移動しません。要素は元の空間で閉じられます。ブロックレベルのボックスは、元がインライン要素であったかブロックレベル要素であったかに関係なく、要素が配置された後に生成されます。絶対配置との唯一の違いは、それを含むブロックです。

含まれるブロック: ブラウザウィンドウ。

相対: 相対配置

相対配置、最も一般的な使用方法は次のとおりです:

使用方法 1: 要素は元の位置に対して一定の距離だけオフセットされますが、元の空間は保持され、空白として表示されます。

方法 2: 要素をposition:relativeに設定して、要素の子要素を要素に対して相対的に配置します。

絶対/固定比較と浮動小数点比較

同じこと: 要素はテキスト フローから分離され、通常のテキストから削除されますが、レイアウトには影響します。ブロックレベルの要素であるかどうか。

違い: float を含むブロックは、最も近いブロックレベルの祖先要素です。

オフセット属性を設定します: 上/右/下/左。初期値は自動です。

位置の配置を使用した後は、offset 属性を使用してオフセットを定義する必要があります。これは、含まれているブロックを基準としたオフセットです。使用する際に注意が必要なのは、オフセットを定義する要素は位置の値が静的ではない要素であることです。

場合によっては、幅と高さを定義する必要もありますが、実際には 4 つのオフセット属性が要素のサイズを定義するため、オフセット属性の定義と競合する可能性があります。このとき、左と右はwidth属性とleft属性で定義され、上と下はtopとheight属性で定義されます。

CSS の別のプロパティ。次にコンテンツオーバーフロー: overflow.

通常、コンテンツオーバーフロー属性には次の値があります:

overflow:visible/hidden/scroll/auto/inherit

overflow 初期値はvisibleです。

オーバーフローは私たちがよく使うものです。要素のサイズは固定されているが、その内容が収まらない場合、オーバーフローが発生します。オーバーフローは、オーバーフロー部分の可視性、不可視 (非表示)、およびスクロールの可視性 (スクロール) を制御します。

要素の可視性visibility: 表示/非表示/折りたたみ/継承、初期値は表示されます。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

div 幅を適応させるチュートリアル

CSS を使用せずにマウスオーバーのスタイルを変更する方法

HTML Web ページを最適化する方法

以上がフロントエンドプロジェクトに位置付けるいくつかの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。