レイアウト

4950 ワード
TIL CSS テキストリンク

要素を削除する方法

  • 基本金
  • display:none
    ドキュメントのレイアウトを変更し、要素を非表示にする(非占有)
  • visibility: hidden
    ドキュメントレイアウトを変更せずに要素(占有)を非表示にする

    • Normal flow


    要素レイアウトを変更しない場合、Web要素はそれ自体のレイアウトで通常のキューと呼ばれます.
    ✔cssファイルが適用されていない場合、Webページの要素は通常の手順で配置されます.

    Position


    CSS positionプロパティは、ドキュメントに要素を配置する方法を指定します.top、right、bottom、leftプロパティは、要素の配置の最終位置を決定します.

    static

    #box {
  position: static;
}
  • 要素
    • を通常のドキュメントフローで配置
  • top、右、底、左、z-index属性は影響を受けません
  • デフォルト

    • relative

    #box {
  position: relative;
  top: 40px; left: 40px;
}
  • 要素
    • を通常のドキュメントフローで配置
  • は、自身に対して上、右、下、左の値に対して
    • だけずれる.
  • 4方向はいずれも付与可能であるが、上部、左側優先適用(底部、右側適用X)
    • .
  • オフセットは他の要因
    • に影響しない.
    要素が
  • ページレイアウトで占有する空間は、静的レイアウトで占有する空間と同じ
    • である.

    absolute

    #box {
  position: absolute;
  top: 40px; left: 40px;
}
  • 要素を通常のドキュメントストリームから削除する
    • .
  • ページレイアウトにスペースを割り当てるのではなく、最も近いロケーションの祖先要素に対して配置します(ただし、祖先にロケーション要素がない場合は、初期プロファイルブロックに基づいています).
  • の最終位置は、上部、右側、下部、および左側の値によって指定されます.

    • fixed

    div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}
  • 要素
    • を通常のドキュメントフローから削除
  • ページレイアウトにスペースを割り当てるのではなく、ビューポートの初期プロファイルブロックに基づいてレイアウトします(要素の親要素が変換、パースビュー、またはフィルタ属性のいずれかではない場合、その親要素はビューポートではなくプロファイルブロックとして機能します).
  • の最終位置は、上部、右側、下部、および左側の値によって指定されます.

    • sticky

    #box {
  position: sticky;
  top: 20px;
}
  • 要素
    • を通常のドキュメントフローで配置
    最も近いブロック(最も近いブロックレベルの祖先)、および表に関連する要素(表に関連する要素を含む)(上部、右側、下部、および左側の値)に基づいて、最も近い、スクロールされた祖先のオフセット量が適用される.
  • オフセットは他の要因
    • に影響しない.

    Overflow


    overflow CSSショートカット属性は、要素の内容が大きすぎて要素のブロックフォーマットの脈絡に一致しない場合の処理方法を指定します.デフォルトはvisibleです.
    overflow: hidden;
overflow: scroll;
overflow: auto;
  • hiddenアプリケーションでは、オーバーフローした部分が遮断されて見えなくなる
    • アプリケーション
  • がスクロールすると、コンテンツ内にスクロールが発生し、オーバーフロー部分
    • がないことを確保する.
  • autoアプリケーション時、コンテンツオーバーフロー時に自動的にスクロールを生成し、オーバーフローを回避する
    • .
    [WebDevCurriculum] drag
    [SPRING]スプリング入門コース-スプリングWeb開発基礎