cssにおける位置決め要素の概要

まとめpadding、margin、float、position:relativeおよびposition:absolute注意:聖杯レイアウト、適応レイアウト、paddingは幅100%でブラウザ表示を超え、margin-leftは負-100%で要素を前の行に移動できます.
padding
paddingは要素に内側余白を追加する
属性の説明:

padding-top:要素の上に画素

が追加されます.

padding-bottom:要素の下に画素

が追加されます.

padding-left:要素の上に画素

が追加されます.

padding-right:要素の下に画素

が追加されます.
特徴:

padding負の値が無効で、自動的に0

に変わります.

padding:20%:単位が%の場合、親要素の幅にこのパーセンテージを乗じた

は4つの方向のpaddingを同時に設定することができ、いずれも機能します.

問題:

paddingは要素自体を大きくするため、ルート要素の幅がブラウザの幅である場合、paddingが設定されている場合、範囲を超え、この状況が見えにくい

.

paddingを内側に加えたい、つまり大きな容器を持たない、box-sizing:border-box

を設置する.
適用:

は、通常、box-sizing:border-boxおよびpaddingを設定する.親要素が内側の周囲に白の余白を残すようにします.

margin
値が%の場合は、親要素を基準としたパーセントで、marginは2つの要素間の距離を制御します.
じこいどう

margin-left:正の値(自分で右に移動);負(自己左シフト)

margin-top:正の値(自分で下に移動);負の値(自分で上へ移動)

隣接する要素の移動

margin-right:正の値(自分が動かず、隣接要素が右に移動);負の値(自己不動、隣接する要素を左に移動)

margin-bottom:正の値(自分で動かず、隣接要素を下に移動);負の値(自己不動、隣接する要素を上へ移動)

適用

margin-left:-100%を設定することで、ブロック要素を前の行、聖杯レイアウト、固定幅、適応

に移動できます.
隣接する2つのmargin=左要素のmargin-right+右要素を重ねたmargin-left
しかし、同じBFC隣接要素marginが重複しています.

の2つの隣接する外側距離が正数である場合、折り畳み結果は両者の間の大きな値である.

の2つの隣接する外距離が負の場合、折りたたみ結果は両者の絶対値の大きな値である.

の2つの外側が正と負の間にある場合、折り畳み結果は両者の加算和である.

float
要素の配置方向を左から右へ、または右から左へ定義します.一般的なleft/right、top/bottomは同時に使用されず、同時に使用できるのは1つだけ有効です
position:relative
相対的な位置付け、相対的な自己位置付け、ドキュメントフローから離れない

left:正の値(自分の左枠に対して右に移動);負の値(自分の左枠に対して左に移動)

right:正の値(自分の右枠に対して左に移動);負の値(右のボックスに対して右に移動)

top:正の値(自分の上縁に対して下に移動);負の値(自分の上枠に対して上へ)

bottom:正の値(自分の下縁に対して上へ移動);負の値(自分の下枠に対して下に移動)

注意:一般的なleftとright、topとbottomは同時に使用されず、同時に使用するのは1つだけ有効です.
position:absolute
絶対位置決め、staticの親要素ではない比較的最近の位置決め、ドキュメントフローからの離脱

left:正の値(親要素の左枠線に対して右に移動).負の値(親要素の左枠に対して左に移動)

right:正の値(親要素の右の枠線に対して左に移動).負の値(親要素の右の枠線に対して右に移動)

top:正の値(親要素の上縁に対して下に移動);負の値(親要素の上の枠線に対して上へ移動)

bottom:正の値(親要素の下の枠線に対して上へ移動);負の値(親要素の下の枠線に対して下に移動)注意:一般leftとright、top、bottomは同時に使用されず、有効な

は1つしか使用されません.