レイアウト内のすべてのコンテンツ



1.position属性-relative、absolute、fixed

  • relative
  • position : relative; 
    それ自体は特に意味がないので、位置的には変わりません.
    元の位置から移動するには、移動位置の上、右、下、左の輪郭が必要です.
  • absolute
  • position : absolute;
    名実ともに死ぬことができる.
    特定の親に対しては、絶対に行動します.
    親の中に相対的、固定的、絶対的な位置があると、親に絶対的な影響を与えます.
    一般的にabsoluteを使えば、絶対的な行動をしたい親に位置:関係を与えることができます.
  • fixed
  • position : fixed;
    その名の通り、これは固定することを意味します.
    fixedは,親選択者を必要としない場合に,所望の要素をスクリーンに固定する際に用いられる.
    設定が完了すると、表示されているブラウザの画面と同じサイズで画面内だけが移動します.right:0; に設定されている場合は、距離の右側が0で、右側に密着していることを示します.

    2.inline、inline-block、blockについて


  • block
  • 要素は垂直方向に次々と堆積する.
  • の幅と高さを持つことができます.
  • の幅は100%です.

  • inline
  • コンテンツに含まれるコンテンツの幅のみを占めます.
  • は改行しません.
  • の幅と高さはありません.(height, width)
  • ページ余白とpadding 横方向のみ 適用されます.

  • inline-block
  • inlineの外観を有するが、blockの特徴を有する.
  • [Like inline]
  • のコンテンツサイズのスペースしか占めていません.
  • は改行しません.
  • [Like block]
  • の幅と高さを持つことができます.
  • ページの余白と塗りつぶしが適用されます.
  • 3.floatについて


    「float」は浮かぶ意味を持つ.
    新聞レイアウトで見たように、テキスト内部に浮動する画像を含め、画像の左右にテキストの周りをレイアウトすることができる.

  • Floatと併用したclear
    レイアウトが重複しないように領域をクリアします.
    テキストと画像の高さが異なる場合は、ハイライトされた段落にclearプロパティを追加してクリーンアップできます.

  • Floatと一緒に使うオーバーフロー
    アウトバウンドボックスの外のコンテンツを非表示/スクロール/表示できます.