CSSにおけるdisplay/float/position属性値の相互影響を詳しく解説

レイアウトとボックスの作成に関連する 3 つのプロパティ: 'display'、'position'、および 'float' があり、次のように相互に作用します:

'display' の値が 'none' の場合、'position' ' および 'float' '効果はありません。この場合、ボックスは生成されません。

それ以外の場合 'position' 値が 'absolute' または 'fixed' の場合、ボックスは絶対位置に配置され、'float' の計算値は 'none' になり、'display' の値が設定されます。次の表に示すように。ボックスの位置は、「top」、「right」、「bottom」、「left」プロパティとそのボックスを含むブロックによって決まります。

それ以外の場合、「float」の値が「none」でない場合、ボックスはフローティングであり、「display」の値は以下のように設定されます。

それ以外の場合、要素がルート要素の場合、'display' の値は次のように設定されます ('block' または 'list-item' として計算される list-item で指定された値を除く) CSS2 では、1 では定義されていません。)

それ以外の場合、 それ以外の場合、「display」属性の値はその指定された値になります。

ここで、inline-flex と flex は、CSS3 エラスティック レイアウト モジュールによって導入された新しい属性値です。

要約すると、絶対配置コンテナ、フレキシブルレイアウトコンテナ、グリッドレイアウトコンテナのコンテンツアイテムの表示属性がブロック化されます。

上記の記事は、CSS における display/float/position 属性値の相互影響について簡単に説明しています。これは、編集者が共有した内容であり、皆様の参考になれば幸いです。 PHP中国語ウェブサイトをサポートします。

CSSにおけるdisplay/float/position属性値の相互影響のより詳細な説明については、PHP中国語Webサイトに注目してください。