Layout

レイアウト(Layout)とは、Webサイトの要素を適切にレイアウトすることです.

Position

Positionプロパティは、レイアウトを担当するCSSプロパティであり、タグの配置方法を決定します.
Position属性には、次の4つの属性値があります.

static

realative

absolute

fixed

static

静的プロパティはデフォルトです.
positionプロパティが指定されていない場合は、自動的に値が指定されます.

realative

元の位置に対して座標を指定します.

absolute

親要素の位置に対して座標を指定します.

.parent { 
    position:   relative;
}
.child { 
    position:   absolute;
    top:        10px;
    left:       10px;
    width:      90%;
    height:     90%;
}

fixed

スクロールを考慮せずに位置を固定したい場合に使用するプロパティ.
このため、top、bottom、left、rightなどを使用して位置を指定し、widthとheightを使用して要素のサイズを指定できます.
スクロールするときは、次の方法で上部に固定されたトップレバーを作成できます.

.header-bar { 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
}

Display

displayプロパティは、ページのレイアウトを決定します.
inline、block、inline-blockなどのdisplayプロパティについて説明します.

inline

は、特定のテキストの表示属性を囲む.

の代表的な表記はspan、aなどである.

block

は、デフォルトでは1行のみを占め、できるだけ広くします.

の代表的な表記はdiv,pなどである.

inline-block

他の行のエンティティと並べて配置されたプロパティは、改行されません.

float

要素の配置方法のプロパティを定義します.
none(デフォルト)、左、右の3つのプロパティ.
*flexまたはgridプロパティの方が好きになりました.

img{
  float:left;
}

clear

floatプロパティを使用するときにclearプロパティを使用する場合、後続のエンティティはfloatの影響を受けません.