CSS Position,display属性

6564 ワード
CSS テキストリンク

Positionは?

  • positionプロパティドキュメントに要素を配置する方法を指定します!!

    • 1. relative

  • 要素を通常のドキュメントフローで配置し、上、右、下、左の値を基準にオフセットします.

    • HTML

    <div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>

    CSS

    .box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: black;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: green;
}
  • 位置:相対属性が与えられている場合、デフォルトでは、所定の位置からのオフセット量は、他の要因には影響しません.

    • 2. absolute


    ページレイアウトにスペースを割り当てることなく、
  • 要素を通常のドキュメントストリームから削除します.逆に、最も親しい親の要素を相対的に手配します.ただし、親にアンカー要素がない場合は、初期プロファイルブロックを基準にします.最終位置はtop、right、bottom、left値で指定されます.

    • HTML

    <div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>

    CSS

    .box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: black;
  color: white;
}

#two {
  position: absolute;
  top: 20px;
  left: 20px;
  background: green;
}
  • 位置:絶対属性が付与されている場合、相対的に配置された要素は一般的な流れとは異なり、絶対的に配置されているため、他の要素が感じないように配置されます.

    • 3. fixed


    ページレイアウトにスペースを割り当てることなく、
  • 要素を通常のドキュメントストリームから削除します.ビューポートの初期輪郭ブロックを基準にして配置します.要素の親要素の1つがtransform、perspective、filterプロパティのいずれかでない場合、その親要素はビューポートではなくcontainingブロックとして使用されます.最終位置はtop、right、bottom、left値で指定されます.

    • 表示とは?


    スクリーンがレンダリングされると、特定の領域のプロパティが表示されます.
    代表的にblock要素とinline要素に分けることができる.

    4. block


  • blockは一つの領域を占める箱状の性質を有する.したがって、デフォルトではblockのwidth値は100%で、新しいローが追加されます!

  • widthとheightの値を指定できます.

  • paddingとmargin値を指定できます.

    • 5. inline


  • inlineは主にテキストを置く形式です.したがって、デフォルトではcontent領域のように自動的にキャプチャされ、新しいローは追加されません.

  • widthとheightの値は指定できません.

  • marging-top、marging-bottomは適用されません.

    • 6. inline-block


  • inline-blockはinline、blockの特徴を持つ形式である.

  • 改行できません.

  • widthとheightの値を指定できます.

  • widthとheightの値を指定しないと、inlineのようにコンテンツ領域のみがキャプチャされます.
    • 5.外部プログラムのインストール
    ソース資料の一部