CSS レイアウト プロパティの包括的なリスト: 表示、位置、およびフロート

CSS レイアウト プロパティ: 表示、位置、浮動小数点数

CSS は、Web ページのスタイルを制御するために使用されるマークアップ言語です。レイアウト プロパティは、Web ページのレイアウトを設計する際に非常に重要です。 CSS にはさまざまなレイアウト プロパティが用意されており、その中で最も一般的に使用されるのは、display、position、float です。この記事では、これら 3 つのレイアウト プロパティを詳しく紹介し、具体的なコード例を示します。

1. display 属性
   display 属性は、要素の表示タイプを指定するために使用されます。一般的な表示属性値は次のとおりです:

1.1. block
block 要素は排他的な行を占有し、常に新しい行から始まり、親要素の幅を埋めます。たとえば、

要素は典型的なブロック要素です。

div {
  display: block;
}

1.2. inline
inline 要素は、それ自体では 1 行を占有せず、必要なスペースのみを占有します。たとえば、45a2772a6b6107b401db3c9b82c049c2 要素は典型的なインライン要素です。

span {
  display: inline;
}

1.3. inline-block
inline-block 要素は行を占有しませんが、幅と高さを設定できます。たとえば、 要素は典型的な inline-block 要素です。

img {
  display: inline-block;
}

1.4. none
none 要素は表示されず、ドキュメント フローから削除されます。たとえば、display: none を設定すると要素を非表示にできます。

.hidden {
  display: none;
}

2. position 属性
   position 属性は、要素の配置方法を指定するために使用されます。一般的な位置属性値は次のとおりです:

2.1. static
static はデフォルトの配置方法であり、要素はドキュメント フローの順序で配置されます。

div {
  position: static;
}

2.2.relative
relative 自身の初期位置を基準とした相対的な位置。要素の位置は、top、bottom、left、right プロパティを使用して調整できます。

div {
  position: relative;
  top: 10px;
  left: 20px;
}

2.3.Absolute
absolute 親要素を基準とした相対的な位置決め、または位置決め属性を使用した最も近い祖先要素を基準とした位置決め (位置は静的ではありません)。

div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.4.fixed
fixed はブラウザ ウィンドウを基準にして配置され、スクロール バーがスクロールしても位置は変わりません。

div {
  position: fixed;
  top: 0;
  right: 0;
}

3. float 属性
   float 属性は、要素がどのように浮動するかを指定するために使用されます。要素がフロートに設定されている場合、その要素は通常のドキュメント フローから取り出され、可能な限り左または右にフローティングされます。他の要素はフロート要素の周囲に配置されます。

img {
  float: left;
}

上記は、display、position、float の 3 つの一般的なレイアウト プロパティの紹介とコード例です。実際には、Web ページのレイアウト設計を実現するための特定のニーズに基づいて、どのレイアウト属性を使用するかを選択できます。この記事が読者の CSS レイアウトの助けになれば幸いです。

以上がCSS レイアウト プロパティの包括的なリスト: 表示、位置、およびフロートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。