[TIL]CSSを混同する3つの側面

📚TL;DR
position
1.相対:自分基準の位置
2.absolute:親の教養基準の位置
3.固定:ウィンドウ基準位置
display
1.block:幅を最大化
2.inline:width最小占有量
3.inline-block:width必要なだけ使用
float:フローティングレイヤを左または右に移動します.floatプロパティを持つエンティティは、親の高さを認識できません.
1. position : relative, absolute
  position propertyを使用して、エンティティを所望の位置に移動します.一般的に、エリー小屋をある位置に移動させたい場合は、両親のエリー小屋にposition : relativeを与え、移動するエリー小屋にposition : absoluteを与え、bottom : 0のように絶対(絶対)位置を与えます.

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position : relative;
}

.child {
  position : absolute;
  bottom : 0;
  left : 0;
}

2. position : fixed
  position property値がfixedに付与されると、ブラウザウィンドウを基準としてエンティティの位置が設定される.これにより、メニューバーを上下に固定できます.

<style>
  .nav-bar {
    position : fixed;
    top : 0;
  }
</style>

<nav class="nav-bar"></nav>

3. display
  display propertyは、画面にエンティティを表示する方法を決定します.設定できる値は「block、inline、inline-block、flex、grid、none、hiddenなど.
block element:elmentの先頭と末尾で実行
inline element:elmentの先頭と末尾では何も実行されません.
inline-block element:レイヤーの開始と終了で上書きは実行されません.elment widthとheightを設定できます.
4. float
  float propertyを使用すると、画面の左側または右側が豊かになります.floatプロパティを持つエンティティは、親の高さを認識できず、レイアウトが破壊されます.代表的な解決法はoverflow : hiddenを用いた方法である.

<div class="box">
  <img class="float-right" src="...">
  <p>...</p>
</div>

.box {
  border : 1px solid #333;
  overflow : hidden;
}

.float-right {
  float : right;
}