layout-レイアウト

1.positionプロパティ-相対/絶対/固定/静

positionは、レイアウトまたはオブジェクトの配置に使用されるcssプロパティです.上下左右の位置を設定できます.

静的(デフォルト):位置を指定せずに自動的に配置されます.

相対

:位置を計算するとき、静的(親要素)の元の位置に基づいています.

absolute:元の位置に関係のない位置を指定して配置します.

fixed:画面変更時に指定した位置に固定します.

[ static ]

positionプロパティのデフォルト値.position属性が付与されていない場合のデフォルト値.

[ relative ]

静的な場合は、現在の配置位置に対して相対位置の属性値を指定できます.top、right、bottom、leftなどを使用して新しい場所を指定します.

[ absolute ]

指定した位置に対する親要素の相対位置を指定できる属性値.親要素はpositionプロパティを相対プロパティとして指定する必要があります.

[fixed]

ブラウザウィンドウ(defaultの位置が左上隅)に対するプロパティ値を指定できます.スクロールの影響を受けず、位置が固定されています.

2. inline, inline-block, block

display porperty
htmlのタグは大きくblock要素とinline要素に分けられます.

<ソース:https://dev.to/lupitacode/la-propiedad-display-en-css-1b6a>

[inline]

主にテキスト入力に使用され、改行X行のテキストが並んで配置され、テキストサイズと同じスペースを占有します.

width、height属性は

に適用されません.

余白padding属性上下ピッチ

を適用しない

<a>, <i>, <span>, <abbr>, <img>, <strong>, <b>, <input>, <sub>, <br>
<code>, <em>, <small>, <tt>, <map>, <textarea>, <label>, <sup>, <q>
<button>, <cite> 外

[ block ]

blockプロパティは1つの領域のボックスを占めます.inlineとは異なり、次のタグには改行が適用されます.

width、height属性は

を適用する
エッジ

、paddingプロパティ

<address>, <article>, <aside>, <blockgquote>, <canvas>, <dd>, <div>, 
<dl>, <hr>, <header>, <form>,<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <table>
<pre>, <ul>, <p>, <ol>, <video> 外 

[ inline-block ]

inlineプロパティと同様に、改行せずに1行に適用され、blockプロパティのようにサイズなどを調整できます.上記の2つのプロパティを同時に持ちます.

width、height属性は

を適用する

余白、padding属性

を適用

<button> , <input>, <select> 外

3. Float

floatプロパティを適用したタグを左右にフローティングさせるレイアウト方法.
タグを適用したオブジェクトが空になっているため、レイアウトを柔軟に配置できます.画像をテキストで囲むために使用します.

位置属性の絶対値と同時に使用することはできません.

の左、右の値を使用して、要素のフローティング方向を指定できます.

方向を

none値に設定することはできません.

Clear

floatプロパティが適用されているタグを無効にすることができます.clearプロパティを付与する段落はfloatの影響を受けません.該当する段落から絵を避けないと思っておけば便利です.

のフローティングアトリビュートをキャンセル

の2値程度で同時に

をキャンセルする.

noneがデフォルトです.claerプロパティのデフォルト値は設定されていません.