1. display

inline , block , inline - block

使用可能な要素

inline

領域の大きさは内部コンテンツの大きさによって決定され、マージンとpaddingのtopと---blottをそれぞれ指定することはできない.

複数の要素を横方向に配置できる

ex)spanラベル

block

幅、高さ

の領域のサイズを指定できます

widthを指定しないと、街全体

を占めます.

複数の要素が垂直に並ぶ

ex) div

inline-block要素:

領域のサイズをwidth、heightと指定できます

諸要素の横並び

上下左右のエッジも指定できます

ex) input

😯横流の形態ですが、wideh、heightを指定することもできます!

2.元素を除去する方法

display: none

存在しないように見える(位置が変わった)

visibilty : hidden

計算ドキュメントレイアウトの位置は変更されませんが、色や内容などは表示されません.

3. float

元素を丸みにする作用

.

の文章形状によく用いられる

通常フロー(normal flow)から要素が脱落し、テキストと行内要素が

の周囲に囲まれていることがわかります.

方向を設定、自分が行ける親エリア内で最大値

まで移動できるようにする.

float : left;

4. position

nomal-flow
レイアウトを変更しない場合、Web要素は自分を配置する方法を説明します.
基本的に、flotやpositionを変更しないと、ブロック要素は100%の自己高さなどを保つ

使用可能な値

static:何も設定されておらず、デフォルトのnormal-flowを使用していると考えられます

	#box{
         top:50px ;
         bottom : 50px; 
         left : 50px;
         right : 50px ; 
    }

このように要素を与えても使えない.
相対:通常のドキュメントフローに従って要素を配置し、それ自体に基づいて(positionはstatic)
top、right、bottom、leftの値に基づいてオフセットを適用します.
元の位置で自由に位置を変えることができます

	#box{
    	  position: relative;
          bottom : 50px; 
          left : 50px;
     }

しかし反対の値top-blott、left-rightを同時に書くとtopとleftが優先されます
absolute:通常のドキュメントフロー(nomal-flow)のドキュメントフローから削除(独占フロー)し、最も近い位置の祖先要素(祖先で非静的要素を基準点として探している)に従います.
娘の両親の位置:相対;多くの場合、子供は絶対的に設定され、親の要因が上昇するにつれて、静的ではない子供を探す.

	#box{
    	  position: relative;
          bottom : 50px; 
          left : 50px;
          right : 50px ; 
     }

fixed:通常のnormalflowのドキュメントフローを無視し、ビューポートを標準とします.
ビューポートはそのままなので、そのまま足踏みしているように見えます.
ex)上部をスクロールするボタンこれらの属性を使用して作成
sticky:一般的なドキュメントフローに従って配置され、ある時点でスクロールすると、固定されたように固定され、自分の位置を失うように見えます.
ex)ブログのタイトルを重ねるには、スクロールの形態に似たスクロール祖先の下に設定します.

5.overflow

コンテンツが大きすぎて、要素のブロックフォーマットがオーバーフローした場合、どのように処理するか、ショートカット属性があります.
visivle:これはデフォルトですが、外にあふれているように見えます.
hidden:オーバーフローした部分を非表示にする
スクロール:スクロール時にコンテキストを表示
Auto:ブラウザで自動的に値が選択されます

6. z-index

z軸上の順序に関する物語

z-index不定なら基本的な積み重ね順としましょう

の位置が静止している子供たちが静止していない子供たちより後ろにいると思えばいい

autoでない場合、整数値

を使用できます.

2番は相対的に指定された要素で、もっと前に見えます.
このような形式の子供の中で、3番を2番の後ろに置きたい場合は、z-indexを指定します.
ex)通知ウィンドウを使用する場合など