CSSでの位置決めにIDを使用する方法

ID セレクターは、特定の ID でマークされた HTML 要素の特定のスタイルを指定できます。

id ​​セレクターは "#" で定義されます。次の 2 つの ID セレクターでは、最初の ID セレクターは要素の色を赤として定義でき、2 番目の ID セレクターは要素の色を緑として定義できます。

#red {color:red;}
#green {color:green;}

次の HTML コードでは、p 要素id属性が赤のp要素は赤で表示され、id属性が緑のp要素は緑で表示されます。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

注: id 属性は、各 HTML ドキュメント内で 1 回だけ使用できます。

CSS には、位置決めとフローティングのためのいくつかのプロパティが用意されています。これらのプロパティを使用すると、列レイアウトを作成したり、レイアウトの一部を別の部分に重ねたり、これまでと同様のことを行うことができます。複数のフォームを使用する必要があるタスク。

位置決めの基本的な考え方は単純です。これにより、要素のボックスを通常の位置に対して、または親要素、別の要素、またはブラウザ ウィンドウ自体に対して相対的に表示する場所を定義できます。明らかに、この機能は非常に強力で驚くべきものです。ユーザー エージェントが CSS2 での位置決めを他の側面よりもはるかに適切にサポートしていることは驚くべきことではありません。

CSS 位置決めメカニズム

CSS には、通常のフロー、フローティング、絶対位置という 3 つの基本的な位置決めメカニズムがあります。

特に指定しない限り、すべてのボックスは通常のフローに配置されます。つまり、通常のフロー内の要素の位置は、(X)HTML 内の要素の位置によって決まります。

ブロックレベルのボックスは上から下に順番に配置され、ボックス間の垂直距離はボックスの垂直マージンから計算されます。

インライン ボックスは水平方向に一列に配置されます。それらの間隔は、水平方向のパディング、境界線、およびマージンを使用して調整できます。ただし、垂直方向のパディング、境界線、およびマージンはインライン ボックスの高さには影響しません。ラインによって形成される水平のボックスはライン ボックスと呼ばれます。ライン ボックスの高さは常に、そこに含まれるすべてのインライン ボックスを収容できる十分な高さになります。ただし、行の高さを設定すると、このボックスの高さが大きくなる可能性があります。

CSS 位置プロパティ

位置プロパティを使用すると、要素ボックスの生成方法に影響する 4 つの異なるタイプの配置から選択できます。

position 属性値の意味:

static

要素ボックスは正常に生成されます。ブロックレベル要素はドキュメント フローの一部として長方形のボックスを作成し、インライン要素は親要素内に配置される 1 つ以上の行ボックスを作成します。

relative

要素ボックスは特定の距離だけオフセットされます。要素は、配置されていない形状と元のスペースを保持します。

absolute

要素ボックスはドキュメント フローから完全に削除され、そのボックスを含むブロックに対して相対的に配置されます。包含ブロックは、文書内の別の要素または最初の包含ブロックである場合があります。通常のドキュメント フローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。この要素は、通常のフローで最初に生成されたボックスの種類に関係なく、配置後にブロック レベルのボックスを生成します。

修正済み

要素ボックスは、そのボックスを含むブロックがウィンドウ自体であることを除いて、位置を絶対に設定するのと同じように動作します。

ヒント: 要素の位置は通常のフロー内の位置に対して相対的なものであるため、相対配置は実際には通常のフロー配置モデルの一部とみなされます。

以上がCSSでの位置決めにIDを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。