CSS のposition、float、display 属性、および 3 つの関係についての深い理解

この記事では主にCSSのposition属性、float属性、display属性の関係について解説していますので、困っている方は参考にしていただければ幸いです。

position 属性:

position 属性は、要素の配置方法を示します。可能な値は 4 つあります: static、relative、absolute、fixed:

static: デフォルト値、要素はドキュメント フローに表示される順序でレンダリングされます
absolute: 絶対位置、要素は相対的です最初の位置決めされた祖先要素 (非静的) が位置決めに使用されます。
fixed: 要素はブラウザ ウィンドウを基準にして配置されます。
relative: 要素は通常の位置を基準にして配置されるため、「left:20」になります。要素の通常の位置に基づいて、要素を 20 ピクセル左に移動することを意味します。

float 属性:

float 属性は、要素が浮動する方向を定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。
非置換要素が浮動している場合は、明示的な幅を指定します。それ以外の場合は、可能な限り狭くなります。
注: 行上に浮動要素用のスペースがほとんどない場合、要素は次の行にジャンプし、このプロセスは特定の行に十分なスペースができるまで継続します。

none: デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。
Left: 要素は左に移動します。
右: 要素は右に移動します。

display 属性:

display 属性は、DOM 要素で使用されるボックス モデル (ボックス) を指定します。つまり、要素が生成するボックスのタイプです。

インライン: デフォルト。この要素は、要素の前後に改行のないインライン要素として表示されます。
None: この要素は表示されません。
Block: この要素は、この要素の前後に改行を入れて、ブロック レベルの要素として表示されます。
inline-block: インラインブロック要素。この値により、要素はブロック ボックスを生成し、置換された要素と同様に単一のインライン ボックスとしてフローします。 Display 値が inline-block である要素は、内部的にブロック ボックス モデルを形成し、それ自体が inline 置換要素のように形成されます。つまり、表示値が inline-block である要素は、ブロック要素と同様に高さと幅を定義でき、配置することができます。この効果は、ページをデザインするときにさまざまな場所で便利になります。インライン要素のように中央に配置したり、サイズを設定したりすることができます。ブロック要素のような単一のメニューですが、text-indent を使用してテキストを非表示にし、背景画像を表示することもできます。
list-item: この要素はリストとして表示されます。ブロックレベルのテーブル (f5d188ed2c074f8b944552db028f98a1 に類似) として表示され、テーブルの前後に改行が入ります。

CSS ボックス モデル (ボックス モデル) すべてがボックスです

div、h1、または p 要素は、多くの場合、ブロック レベル要素と呼ばれます。これは、これらの要素がコンテンツのブロック、つまり「ブロック ボックス」として表示されることを意味します。これに対して、span や Strong などの要素は、「」と呼ばれます。コンテンツが行で表示されるため、「インライン要素」、つまり「インライン ボックス」

表示属性を使用して、生成されるボックスのタイプを変更できます。つまり、表示属性をブロックに設定すると、インライン要素 (3499910bf9dac5ae3c52d5ede7383485 要素など) を作成することもできます。この場合、生成された要素にボックスがまったく含まれないように、display を none に設定することもできます。表示されなくなり、ドキュメント内のスペースを占有しなくなります。場合によっては、明示的に定義されていない場合でも、ブロック レベル要素が作成されます ( div など)、テキストが段落として定義されていない場合でも、段落として扱われます:

<div> 
some text 
<p>Some more text.</p> 
</div>

この場合、ボックスは関連付けられていないため、名前のないブロック ボックスと呼ばれます。特別に定義された要素

を使用して: 表示、位置、float の間の関係

#

要素の表示属性が none に設定されている場合、その要素に対応するボックスは生成されません。この場合、float とposition は無視されます。
それ以外の場合 (display が none でない場合)、position が設定されている場合は、その要素に対応するボックスは生成されません。要素の属性が絶対または固定に設定されている場合 (両方とも絶対配置)、float は無視され (float の計算値はなし)、表示属性の値は次の表に従って自動的に計算されます。ボックスの位置は、top、right、bottom、left 属性とボックスのコンテナーによって決まります。
それ以外の場合 (表示が none ではなく、位置が絶対的または固定的ではない)、float の値が null でない場合 (左または右)、ボックス それは浮動小数点であり、表示の値は次の表に従って計算されます
それ以外の場合 (表示がなしではなく、位置が絶対または固定ではなく、浮動小数点数がなし)、要素がルート要素の場合、display の値は次の表に従って計算されます。 (この場合は例外があります。CSS2.1で定義されているように、displayの指定値がlist-itemの場合、計算結果のdisplayの値はblockまたはlist-itemになります)
それ以外の場合(displayがnoneではない) , そして位置が非絶対、固定、浮動小数点数なし、ルート要素ではない）の場合は、指定した表示属性値に従って表示されます。

テーブル表示属性の変換:

指定された値 inline-table を table
に値を指定します inline、table-row-group、table-column、 table-column-group、table-header-group、table-footer-group、table-row、table-cell、table-caption、inline-block ブロックに変換
他の指定値は変更されません。

以上がCSS のposition、float、display 属性、および 3 つの関係についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。