TIL 2. position, inline, float

positionで使用する値は相対,絶対,固定の3種類である.🐶

静的にはあまり使われません.

position: relative;

position: absolute;

position: fixed;

1. relative

それ自体は特に意味はありませんが、どこにも移動しません.
元の位置から移動するには、移動可能な位置の上、右、下、左の輪郭が必要です.
ここでtop,right,bottom,leftはpositionがある場合にのみ適用されるpropertyである.

.relative {
	position: relative;
 }
 .top-20 {
 	top: -20px;
    left: 30px;
 }   

div.relative.top−20は20 pxを上方に移動し,左側から30 px低下した.

2. absolute

名前のように絶対的な位置に置くことができます.
特定の親に対する絶対的な行動、親の中に相対的、固定的、絶対的な位置がある場合、親に対する絶対的な行動.
一般的にabsoluteを使用する場合、絶対移動したい親にとって、位置:relative;付与すればいいです.

pタグはblock-elementであるため、横方向のサイズはすべて親の幅を占めなければならず、インラインのようにコンテンツサイズの幅だけが生成される.
このように絶対値が得られると,コンテンツの大きさだけが横方向の大きさになる.

3. fixed

名前の通り、固定的な意味です(ex、りんご商団バー...)

絶対に相対的な親が必要で、固定的な親は必要ありません.
fixedは画面内のみ移動し、表示されるブラウザの画面サイズと同じサイズです.
例えば、right:0;bottom: 0; に設定すると、右下隅に貼り付けられます.
*色設定でrgbaに設定すると、左から3色とも数値で、最後は不透明度です.
cssでは、displayプロパティによって、ページ上の要素がどのように表示されるか、および他の要素とどのように配置されるかが決まります.各种のディスプレー属性値の中から、基本的に混同される可能性のある3つの値を探し出して、スキップしましょう!!🙋🏻‍♀️🙋🏻‍♀️🙋🏻‍♀️

4. inline

displayプロパティinlineとして指定されたエンティティは、前後の行を変更する必要がなく、1行に他のエンティティと並べて配置されます.

代表的な行内宣言:<span>、<a>、<em>ラベルなど。

5. block

displayプロパティblockとして指定されたエンティティには前後の改行があり、他のエンティティを別の行にプッシュし、独自に1行を占有します.

代表的なブロック要素:<div>、<p>、<h 1>タグなど。

6. inline-block

デフォルトでは、displayプロパティがinline-blockとして指定されたエンティティは、inlineエンティティのように前後に改行するのではなく、他のエンティティと並んで1行に配置されます.ただし、インラインエイリアスでは実現できないwidthプロパティとheightプロパティ、marginプロパティとpaddingプロパティの上下の間隔を指定できます.

代表的なinline-block要素:<button>、<select>タグなど。

inline-block要素は、以下に示すように、そのスタイルをdisplay:inline-blockとして明確に指定する必要があります.inline blockを使用すると、レイアウトで使用するために複数のエンティティを1行に正確に配置できます.

7. float

floatは主に画像の周囲にテキストを囲むために作成されたPropertyです.
しかし、ページ全体のレイアウトを決定する際には、非常に重要なツールでもあります.
floatプロパティは、左、右、noneの間に値を与えることができます.
しかし,float属性を持つ要素は親がその高さを認識できないため,親を離れることがある.
floatを解決するにはclearプロパティが必要です.
一般的な解決策は、外部div(.wecode-box)オーバーフロー:hidden;サイクル