フロントエンドプロジェクトに位置付けるいくつかの方法-CSSチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2017-11-30 14:06:18

オリジナル

4954 人が閲覧しました

フロントエンドプロジェクトでは、位置決めを実行するために位置決め属性 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.