cssボックスとレイアウトへの位置決め

cssボックスモデル

原理:padding,border,marginの3つが箱を構成している.
画像はネットから
Margin(外距離)-枠線の外の領域をクリアします.外距離は透明です.Border(枠線)-内側の余白と内側の余白を囲む枠線.Padding(内側の余白)-コンテンツの周囲の領域をクリアします.内側の余白は透明です.Content(コンテンツ)-ボックスの内容、テキストと画像が表示されます.
w 3 c標準:総幅=margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
IE標準:総幅=margin-left+width+margin-right

css位置決めメカニズム

ノーマルフロー

要素の位置は、HTMLドキュメント内の要素の位置によって決定され、左から右へ、上から下へ.

ブロックの段枠は上から次へと配列され、枠間の垂直距離は枠の垂直外距離から計算される.

行の内枠は、1行に水平に配置されている.水平の内側の余白、枠線、外側の余白を使用して、それらの間隔を調整できます.ただし、垂直な内側の余白、枠線、外側の余白は、行の内側の枠線の高さに影響しません.1行によって形成される水平枠は、行枠(Line Box)と呼ばれ、行枠の高さは、それが含むすべての行内枠を常に収容するのに十分である.ただし、行の高さを設定すると、このボックスの高さを増やすことができます.

位置

相対位置決め要素は、通常のストリーム内の他の要素に対するオフセットに対して、その形状とその占有空間を維持する.

絶対位置付け(absloute)は、位置付けされた祖先要素に対して、位置付けされた祖先要素がなければ、最初のブロックを含む.ノーマルフローから離れ、ノーマルフローの位置決め上

を覆う

固定測位(fixed)ブラウザウィンドウに対する絶対測位

フローティング

は通常の流れでは空間を占有しないが、その後のフローティング要素に空間占有の影響を及ぼす

.

レイアウト

一般的なレイアウト

単列水平中央レイアウト、一列定幅一列適応レイアウト、二列定幅一列適応レイアウト、両側定幅中間適応三列レイアウト.

聖杯と双飛翼はよく見られる3列のレイアウトで、左右の2列の幅が固定され、中列が適応している.

聖杯レイアウト

両側のサイドバーに位置を空けるためにcontainer要素にpadding

を設定する.

左右の2つのdivは相対的に位置決めしてleft,right属性を割り当て、負のエッジピッチで占有

を除去する.

main div幅100%

を設定

body {
    padding: 0;
    margin: 0;
    min-width: 600px; /* 2*left + right */
}
.container {
    padding-left: 200px;
    padding-right: 200px;
}
.main {
    float: left;
    width: 100%;
    height: 300px;
    background-color: red;
}
.left {
    position: relative;
    left: -200px;
    float: left;
    width: 190px;
    height: 300px;
    margin-left: -100%;
    background-color: blue;
}
.right {
    position: relative;
    right: -210px;
    float: left;
    width: 190px;
    height: 300px;
    margin-left: -200px;
    background-color: green;
}

ダブルフラップレイアウト

3列左フローティング

mainコンテンツが遮られないようにpadding

を設定する.

は負のマージンで左右2列に位置決め、占有

を除去する.

.main-con {
    float: left;
    width: 100%;
}

.main {
    height: 300px;
    margin-left: 210px;
    margin-right: 210px;
    background-color: red;
}

.left {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -100%;
    background-color: blue;
}

.right {
    float: left;
    width: 200px;
    height: 300px;
    margin-left: -200px;
    background-color: green;
}

両者が異同する

両方とも、ドキュメントストリームの一番前にメインバーを配置し、優先的にロードします.

は両方とも3列のフローティングであり、次いで、負のマージン位置決めによって占有を除去することによって3列のレイアウト

を形成する.

のカラムmain処理は異なります.聖杯レイアウトは親容器の左、右内の余白を利用して位置決めされます.ダブルフラップレイアウトは、メインバーをdivにネストした後、メイン列の左、右の外距離で位置決めします.