TIL-17|Layoutのすべての内容

Position

static:すべての要素のデフォルト
相対:自分の元の位置(元の位置を覚えている)
absolute:基点|をblockに変換する必要があります.(floatと同じ)
fixed:viewportを押して移動します.

相対と絶対を理解する

検索ウィンドウを作成するにはhtmlにinputを作成し、拡大鏡アイコンを挿入します.

拡大鏡アイコンを検索ウィンドウに入れるために位置を調整したが、検索ボックスには入れなかった.
relativeとabsoluteを再学習し、コードを修正しました.

.search {
  position:relative;
  width: 300px;
 
}

input {
  width: 100%;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding:10px 12px 10px 12px;
  font-size: 14px;
}

img {
  position:absolute;
  width: 17px;
  top: 10px;
  right: 12px; 
}

Inputと拡大鏡アイコンをdivに組み合わせ、親要素に対してサブ要素拡大鏡アイコンを絶対にし、親要素searchを基準点として確認し、自分の位置を見つけます.

固定理解

様々なサイトを見ると、スクロールしていても、上端ナビゲーションが固定されている場合にスクロールするサイトが多く見られます.これにより、ユーザーがスクロールしている場合でも、他の領域にジャンプする要素を上部に固定することができ、ナビゲーションが不確定な場合に他のページに直接ジャンプすることができます.
固定は思ったより簡単です.
まずhtmlにタイトルを作成し、cssを変更します.

header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 48px;
  background-color: rgba(45, 45, 45, 0.95);
}

一番上の部分なのでtop、left、rightを0にして位置をfixedにすると、

ヘッダーが作成され、スクロール時に

透明度を確認することで、タイトルが一定の状態で転がっている様子が見えます.

inline, inline-block, block?

block->ロードカーテン!inline->ストリーム!
blockは比喩で、inlineは1本の線です!要するに,面(領域)と線(流れ)と理解するのは容易である.

block? バリケード。

積み木は麺です!すなわち、1つの領域を占有しているため、デフォルトではwidth値は100%である.
したがってwidth、height、margin、paddingを指定できます.

inline? 流れ!

inlineはblockとは逆にwidth値は100%ではなくコンテンツ領域を指定します.
したがってwidth,heighは指定できず,marginは上下に適用できない.

inline-block? バリケード&フロー

block && inline! blockとinlineの特徴があります.blockのようにwidthとheightの要素を指定できます.もちろんwidthとheightを指定しないと、既存のinlineのようにコンテンツの大きさをチェックすることができます.

Float? 家出家

floatプロパティを使用すると、画面を左または右に柔軟に配置できます.
フローティング要素は親要素ではサブ要素ではなく、家出のサブ要素と見なされます.
left:要素を左にフローティングに設定する
right:エレメントを右側にフローティングに設定する
none: default

floatを使用してレイアウトを行った後、ゼロドメイン破砕が発生した場合、Clearfixを解決する方法があります.

仮想要素:使用後
「仮想要素」(Peudo-elements)とは、仮想要素を作成および出力することです.beforeが最も代表的です.

.clearfix::after {
	content:'';
	display:block;
    	clear:both;
    	}

このコードが表示されると、float:left、float:rightを初期化する空白のブロックを作成することを意味します.コードがclear:左float:leftの場合、clear:rightはfloat:rightを表します.

overflow
オーバーフロー:hiddenをfloatを持つ親要素に適用します.
ただし、オーバーフロー部分はカットされるので、1番の仮想要素を使うことをお勧めします!