ブロックと行の内側と位置のプロパティ

1.ブロックとインライン

HTMLのすべての要素には、Webブラウザでの要素の表示方法を決定するdisplay属性があります.このdisplay属性値は、次の2つのいずれかです.

ブロック

インライン

ブロックタイプの要素

display属性値がブロックの要素は常に新しい行(行)から始まり、その行のすべての幅

を占めます.

< p >, < header>, < footer>, < div >, < h >, < ul >, < ol >, < li >, < table >, < form >要素

< div >要素:他のHTML要素を組み合わせたブロック要素でよく使用されます.主に複数の要素を同時に適用するためのスタイル

ブロック要素は要素の属性であり、ブロック全体を書き込むための要素

インラインタイプの要素

display属性値がインラインの要素は、新しい行(行)から開始しません

要素の幅は、その行のHTML要素の内容(内容)のみを占めます

< span >, < a >, < img >

<span>要素:テキスト(テキスト)の特定の部分を組み合わせるための一般的な行内要素.スタイルをテキストに適用するための特定の部分

行内要素行内タグのみが適用される部分、すなわち対応する部分のみが適用される

display:inline-blockプロパティ

block性質のタグは、inline性質を有するタグに変換することができ、逆も同様である.
方法:

ex) 원래 inline 타입이던 span태그를 block타입으로 바꾸기
span {
  display: block;
}   

display:inline-block:
デフォルトでは、インラインタイプのように1行に他の要素を配置できますが、元は許可されていなかったwidth、heightプロパティ、margin、paddingプロパティの上下間隔

を指定できます.

位置プロパティ

1. static position

div { position: static; }

staticが設定した要素はtop、right、bottom、left属性値の影響を受けません

すべてのHTML要素の位置属性のデフォルト設定はstatic

2. relative position

div.relative { position: relative; left: -30px; }

デフォルト位置より位置を設定

static(デフォルト)の相対位置変換

position: relative; 移動するにはtop、right、bottom、left propertyを常に設定する必要があります(負の数になります)

3. fixed position

div.fixed { position: fixed; top: 0; right: 0; }

ビューポート設定位置

つまり、ページスクロールは常に同じ位置にある

4. absolute position

div.absolute { position: absolute; top: 50px; right: 0; }

親要素に対する移動.親要素の位置が相対的、固定的、絶対的である場合、それに伴って移動します.通常、absoluteを使用する場合は、position:relativeを標準とする親に割り当てるだけです(この場合、親に自動的に移動します)

ex)right:0右側から0

に下がる