TIL-2. positionのプロパティ/inline、inline-block、block

1. position

relative

absolute

fixed

positionプロパティは、Webページの要素の配置を実行します.
テキストまたは画像を所望の位置に配置できます.
上記のプロパティのほかに、静的またはstickyもあります.
主に最もよく使われる上記の3つの属性を理解しました.
以上の3つのプロパティはtop、right、bottom、leftを使用します.
要素を所望の位置に配置できるという共通点があります.
相対的に前の要素にリンクし、位置を指定します.
absoluteは、導入に必要な場所を指定します.
fixedは指定された位置に固定されて配置されます.

相対プロパティを使用すると、以前の要素で設定した値に従って移動して表示されます.
親の要素を基準にフォローしていると考えられます.

absoluteプロパティはrelativeとは異なり、元の場所に関係のないプロパティを指定できます.
上位要素を基準として位置を決定すると考えられる.
ただし、親要素が静的である場合は無視し、親要素がない場合は無視します.
htmlに準ずる.

固定プロパティは、Webページの相対位置を基準にして、固定位置を使用できます.
スクロールを移動しても、このプロパティを使用して固定できます.

2. inline, inline-block, block

代表的ブロック要素

<address>, <article>, <canvas>, <div>, <header>, <form>, 
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, 
<table>, <ul>, <p>, <ol>, <video> 등등..

代表的なインライン要素

<a>, <span>, <img>, <strong>, <b>, <input>, <sub>, <br>, 
<map>, <textarea>, <label>, <button> 등등..

displayの属性3対(?)はい.
よく使う.
スクリーンをレンダリングするときに表示される特定の領域の性質.
財産です.
inline:コンテンツサイズのスペースのみを占有し、改行しません.
>>width、height Xの適用
>>マージン、padding-top、bottom応用X
>>line-height Xをオンデマンドで使用
block:無条件に1行を占め、次のラベルは常に改行されます.
inline-block:上記の2つの属性の特徴を有します.
幅、高さ、
line-height値を適用できます.
もちろんmargin,padding-top,bottomも使えます.
💡 ただし、inline blockを使用すると、プロパティ間にスペースが表示されます.
親ラベルにfont-size:0を適用できます.
また、inline-blockプロパティ間の高さが一致しない場合は、親スペースに表示されます.
垂直位置合わせ:topを適用できます.