まず、 基本的な概念
- 視覚整形モデル（視覚整形モデル）：CSSは、複数のボックスのどのページレイアウトを指定するメカニズムです
- 視覚整形モデル：非常に複雑な機構であるが、複雑なCSSの仕様が含まれています。実用的な観点から、この章のコースのみ、必要なときに分割されたページの領域におけるコア知識を学ぶために、ページ領域のほぼすべての使用を分割することにより、ブロックボックスが、そのため、この章では、まだ関与している唯一のブロックボックス
- どのように複数のレイアウトボックス：HTML ページ内の各要素では、ボックスを生成します。これらのボックスが配置されている方法は、視覚的な書式設定モデルによって定義され、お互いに影響を与えます。
- 主に二つの要因による：; Buter要素箱状の金型部品。
4。
第二に、ビューポート
- ビューポート：可視ウィンドウは、一般的にブラウザの視覚的な影響によってのみ制限されるブラウザ（ビューポートウィンドウサイズの表示可能エリアのサイズ、コンテンツに依存しないことをいう、ページコンテンツをサイズがビューポートのサイズを超えた場合に、ブラウザー意志スクロールバー）
- 前記ブロック：各要素は、ページ要素に配置された領域である含むブロックを有し、典型的には、親要素のカートリッジ（コンテンツ・ボックス）のコンテンツ要素を含むブロックを、ブロックを含むルート要素初期化ブロック（初期包含ブロック）を含みます。
2。
第三に、測位システムの概要
第三に、1 、所定の視覚的な書式設定モデル、3つの位置決めシステムの全正規ストリーム（通常フロー）;フロート（フロート）、絶対位置（絶対配置）
2 、任意の要素、位置決めシステムのいずれかに属している必要があり、異なる測位システム、ブロックを含む要素の大きさ及び位置は、いくつかの違いがあります。
決定する測位システム：
第四に、 ボックスモデルと測位システム
=定規ボックスモデルボックスカセット位置測位システム=
ボックスモデルの測位システム。
そして、モデルのサイズ：マージン：PX、EM、％、自動車。
ボーダー：PX、インチ
パディング：PX、EM、％、自動車。
横幅：PX、EM、％、自動車。
身長：PX、EM、％、自動車。
サイズの値に関わらず、測位システムの設定します。
：サイズは、ブロックサイズの割合が構成されマージン、パディング、幅の割合を：含むブロックの幅比率：高さ割合はほとんど使用されません。
モデルサイズ-auto：サイズは、位置決めシステムに影響を与え、異なる測位システム、自動カウントルールは同じではありません
第五に、 従来のフロー
定期的な流れは：また、通常のフロー、文書フロー、通常のドキュメントフローとして知られている。流れは、最も一般的な従来の測位システムでは、デフォルトのすべての要素は、従来のフローの位置です
従来の水平流にサイズボックスは、含むブロックの幅に等しくなければなりません。
水平方向：従来の水平フローボックスのサイズは、ブロックであっの幅に等しくなければならない。、次いで強制自動マージンから右に設定されていない場合
ボックスの位置：順次配置：垂直方向のボックスであって、順次配置されたブロックである書き込み順上から下の表示HTML要素には、カセットは、箱サイズの全体的な寸法である含むブロックに占めます
垂直方向は、隣接する二つの余白場合、（フォールディング）をマージ
垂直方向：マージされていないから水平方向外側
マージン隣人：2つのマージンの間には国境がない、パディング、及び内容
マージ：最大値を取って、正で最小の、負の、また陰性である取ります
第六に、 浮動
フロート要素が左右に属性値をすると、float型に属する位置決め要素は、フロートを継承することはできません。なしデフォルト値を、左浮動左、右、右、フローティング。
| プロパティ |
通常の流れ |
フロート |
| margin-left：オート |
含ん滞在フルブロックを試してみてください |
0PX |
| マージン右：オート |
含ん滞在フルブロックを試してみてください |
0PX |
| マージントップ：オート |
0PX |
0PX |
| マージン下：オート |
0PX |
0PX |
| 幅：オート |
含ん滞在フルブロックを試してみてください |
コンテンツの幅を適応させます |
| 身長：オート |
含ん滞在フルブロックを試してみてください |
コンテンツの幅を適応させます |
浮動ボックスの場所：
- 左浮動ボックスから左方向
- 右の右のボックスの配置に浮上
- ボックスの上端をフロートさせると、上のボックスの上端よりも高くすることはできません
- 残りのスペースは、ボックスを下に浮くことができない場合には十分なスペースを提供することが可能になるまで、箱を下方に移動されます
- カセットを受信してから、左または右に移動
通常のストリームフロートは会いました：
従来のフローは、ボックスを混合し、浮動ボックス内に配置します
- 1 フロートボックスに置かれたとき、ボックスは、従来のフローを避けるために
- 2. ボックス内に置かれたときに正常な流れは、浮動ボックスは無視します
- 3. ボックス通常の流れの高さ、フローティングボックスを無視しての自動計算-折りたたみ高さ
3。
クリアフロート
ディスプレイの要素をできるように、浮動要素を削除するには、それは浮動要素の下に表示されます
親要素の高さの崩壊を防ぐために、両方：最後の子要素のための明確な使用
クリア：継承することはできません。デフォルト値なし
値：何もない透明フロートもしません。
左：クリアはフローティングのまま下のボックスに配置された浮動要素を残しました
右：右下の浮動ボックスに置かれた浮動要素をクリアする権利
both- ：クリアは、周りの浮動ボックスの下に配置要素を浮動します
ボックスの相対的な位置：
相対位置は、元のシステムに配置ボックスの相対位置を指し
相対的に箱位置プロパティは、相対位置を有効にします
ポジション：継承されていない場合、デフォルト値は静的です。
値：静的：静的位置、元の測位システムの下のボックス内の位置
関係：相対位置、ボックス元の位置に対してオフセット
アブソリュート：絶対位置
固定：固定位置
ポジション：関係：左によって、トップは、右、下にオフセット配置されました
フローティング要素が絶対位置に設定されている場合：
要素：フロート：左;位置：絶対;唯一の要素は、測位システムに属し
要素が絶対位置に設定されている場合は、フロートプロパティがnoneに強制されます
絶対配置の要素は他の要素に影響を及ぼさないであろう
左、上、右、下が設定してもよいです
絶対位置決め要素は、ブロックを含みます
典型的には、要素は、その親要素のカートリッジの内容（コンテンツボックス）のブロックを含みます
除いて、絶対配置要素
絶対位置、左によってボックスの位置、上、右、下決定4つの属性、それらがレンジブロック含むの縁部からカセットを表します
| プロパティ |
フロート |
| margin-left：オート
|
0PX
|
| マージン右：オート
|
0PX
|
| マージントップ：オート
|
0PX
|
| マージン下：オート
|
0PX
|
| 幅：オート
|
コンテンツの幅を適応させます
|
| 高さ：オート
|
コンテンツの幅を適応させます
|
例数が少ない、カセットオート値は、ボックスの位置を適応させる必要があります
レベルを積み重ねる：それは表示前に要素を表示するユーザーを決定典型的には、スタックのより高いレベル、正面ディスプレイ、Z-indexプロパティは、スタック要素のレベルを設定します。
インデックス-Z ;継承されていない、デフォルトの自動;
値：オート：正面ディスプレイの自動、通常、順番に書き込まれた要素
値：手動で前面表示素子を積層したスタックレベル、ハイレベルに設定
なお、z屈折率特性を使用する場合：しない静的要素位置を、Z-インデックスを使用しないようにしよう