Layout

4411 ワード

position - relative, absolute, fixed
inline, inline-block, block

Layout


「レイアウト」(layout)とは、複数のコンポーネントを特定の空間に効率的に配置して、より美しく見えるようにすることです.
符号化では、Layoutは様々な方法で実施することができる.同じLayoutは、blockエイリアスを使用するdivからpositionを使用するflexとrelativeまで、さまざまな方法で作成できます.

Position


positionプロパティにはrelative、absolute、fixなどの機能があります.
最初は相対と絶対の関係を大体理解して、それから基本概念を再学習して、もっと長い時間を費やしたので、今度他の理論を勉強するときは、概念を正しく理解し、超えた習慣を身につけたほうがいいです.

relative


このプロパティ自体にはstaticのデフォルトの位置に基づいた機能はありません.

absolute


このプロパティは、親タグの範囲に基づいています.親ラベルがdivの場合、blockセグメントの影響を受け、両端と指定heightの範囲内で操作されます.
最初は相対と絶対を知らなかったのでもう少しで諦めそうになりました

fixed


上記のプロパティとは異なり、fixedは指定された位置に固定される役割を果たします.また、通常の場合に必要な空白の位置に配置することもできます.
  <body>
    <div class="box">
      <div class="colorbox">
        <span>#709FB0</span>
      </div>
      <div class="bottom">
         <button> <i class="fas fa-heart">451</i></button>
         <div class="upload">
           3days
         </div>
      </div>
    </div>
上記のコードをpositionを用いて記述した.

上記の成果物を作成し、サスペンションとcapacityを使用してマウスの反応機能を追加しました.