視覚的な書式設定※モデル
1。視覚整形モデル（視覚的な書式設定のモデル）：CSSの仕組み、複数のボックスのどのページレイアウトを指定します。
2。視覚整形モデルは、非常に複雑な機構である複雑なCSSの仕様が含まれています。
※ビューポート
1。ビューポート（ビューポート）：可視ウィンドウは、一般的にブラウザの表示可能領域を指し
2。ビューポートのサイズは、ブラウザウィンドウのサイズの視覚的な影響によって制限され、及びコンテンツに関連しません
3。ページコンテンツのサイズは、ビューポートのサイズを超えた場合、ブラウザのスクロールバーが表示されます
※ブロックを含みます
Lが（ブロックを含む）ブロックを含む：各要素は、それが参照するブロック要素を備えています
典型的には、カセットブロックを含む要素は、その親要素のコンテンツ（コンテンツ？ボックスであります
ルート要素（HTML）はブロックを含む：初期化（初期包含ブロック）を含むブロックを
リットル、視覚フォーマットモデルでは、すべての要素が含まれるブロックを防止しなければならないことを要求します
L個の要素によって二つの要因限り、ブロックのサイズと位置を含みます
- ボックスモデル要素
- 測位システム要素
※測位システムの概要
視覚整形モデルは、3つの位置決めシステムの合計を提供しています。
従来のフロー（通常の流れ）
フロート（浮き）
絶対位置（絶対配置）
任意の要素は、位置決めシステムのいずれかに属している必要があります
ブロック要素のサイズと位置を含む異なる位置決めシステムは、いくつかの変更であろう
※位置決め決意システム
デフォルト値の静的位置絶対位置
デフォルト値なしフロートフロート
デフォルトにより、位置決め要素は、従来のフローです。
※ボックスモデルとポジショニングシステム
- 測位システムボックスモデルが影響するため、自動価値計算の影響
ボックスモデルの※サイズ - ？％
- ブロックサイズがあって割合です
パーセンテージマージン、パディング、幅：パーセンテージを含むブロックの幅
高さの割合
- コンテンツを含むブロックの高さは、包含ブロックの高さに関して、何の関係もありません場合には
- コンテンツを含むブロックの高さは、設定が無効でどのくらいに関係する場合
サイズはボックス※モデル - ？オート
- サイズの影響を受け測位システム
- 異なる測位システムのルールに従って計算
※通常の流れ
- また、通常の流れ、文書フロー、通常のドキュメントフローとして知られている従来のフロー、
- 従来のフローは、最も一般的な位置決めシステムであり、デフォルトですべての要素従来のフロー位置決めされています
自動値ボックスモデル
水平に
、強制マージンは？右autoに設定されていない場合は、従来の水平流のサイズボックスは、ブロック含むの幅と同じでなければなりません
従来の小屋：
- 自動車に固定された幅、左右の余白：水平中心ブロックを含むカセット
- 左右カセットは、ブロック突出あっ幅自動、左と右のマージンが負であります
垂直方向
- autoにマージン：0PX
- フィットネスコンテンツをカバー：オートまでの高さ
ボックスの場所
- 順次垂直方向のブロックを含む箱上に配置され
- 最初の場所：書き込み順に上から下の表示HTML要素へ
- カセットは、ブロックサイズを含むボックス全体のサイズに占有する場合
- 垂直方向は、隣接する二つの余白場合、（フォールディング）をマージ
- 垂直方向：外からの水平方向がマージされていません
- マージン隣人：2つのマージンの間には国境がない、パディング、及び内容
- マージ：最大値を取って、正で最小の、負の、また陰性である取ります
弾性レイアウト
箱の箱、それはプロパティフレックスを表示するように設定されている場合、カートリッジボックスは弾性になる（弾性容器）
すべてのサブ要素は、プロジェクトが自動的に伸縮性になります。、独自のカートリッジ位置決めシステム内に配置された柔軟な弾性のレイアウトに影響を与えるだけ
柔軟ポーチプロジェクトの唯一の弾力性
プロパティ
フレックス方向：主軸の方向を変更します
行の行のデフォルト
右から左に行逆逆スピンドル
スピンドルダウン配列から列で列
ボトムアップからのスピンドルによって列逆転
-コンテンツを正当化：その途中でスピンドルを変更します
スピンドル配置されたデフォルトの起動フレックススタート
フレックスエンド整列スピンドル終了
主軸の中心線と一致センター
スペース間の脇左プログラム、中間流通の平均
スペースの周りのすべての項目の平均分布
ALIGN-アイテム：変更側軸配向
デフォルトの伸びストレッチ
始点側のシャフトに合わせフレックススタート
フレックス・エンド側の軸端に整列
シャフトの中心線のフレックス中心側は整列します
フレックスラップ
ラップ（ラップ）
NOWRAP（折り返されません）
ALIGN-コンテンツ
ルール：自動的に伸縮幅プロジェクト、幅と高さがコンテンツを適応させます。自動車へのマージン、それが吸収します
弾性容器の残りの空間。
プロジェクトのプロパティ
小型から配置の大きな順に、プロジェクトの弾力性を変更するために注文します
圧縮比フレックス収縮弾性項目を変更
1つのデフォルト
0圧縮なしません
プロジェクトの弾力性を変更するためにフレックスが成長の割合を増やします
0デフォルトでは増加しません。
フロント弾性圧縮または成長の幅に基づいてフレックス基本項目設定されていない場合、デフォルトはautoです表し、
幅と同一の属性値
スケッチフレックス：シュリンク基礎を育てる;また、圧縮、基本的な価値観を拡張するように設定
ウェイ水平方向の中心
1.テキスト文字要素は、テキストアリーンを配置中間レベル：センター;
2.従来の水平流カセット中央ブロック、約自動車Mのarginの幅を設定します
3.柔軟ポーチに親要素のカセット、および設定は正当化コンテンツを：センター;
4.親要素は、自動に設定され、必要な要素のマージンを中心弾性カセットです。
垂直方向の中心
1.テキストを要素に垂直にセンタリングされ、要素の高さ行の高さを設定します
垂直中心ブロックを含む2.ボックスは、親要素が弾性カセット側シャフトアライメントALIGN-アイテムを中心とするある設定しました。
センター
3.柔軟ポーチに親要素を設定し、必要なマージン垂直センタリング要素は、autoに配置されています。
（中央ブロックを含む）の水平中心
1.左右の余白の自動の幅を設定します。（従来のブロックフローカートリッジ、弾性プロジェクト[固定されていない幅]）
柔軟なポーチが正当化コンテンツを設定する2：センターを、弾力プロジェクトが主軸を中心としましょう。（ユニバーサル適応）
3.親要素は、テキスト整列を配置：中央を、カートリッジ内カートリッジセンタリングブロックの行をしましょう。
4.絶対位置決め要素、左：0;右：0;固定幅、左マージン：オート。
5.のmargin-left：50％;変換：移動X（-50％）。[マージン、含有割合に対するパディングブロック幅
] []究極の計画より
垂直方向の中心
1.単一行のテキストは、ブロックの高さを含む親要素の垂直に配置された行の高さを中心。
弾性サイドプロジェクトが軸を中心とするように、中心2.柔軟ポーチは、ALIGN-アイテムが配置されています。
3.絶対位置決め要素、トップ：0;底：0;高く設定し、垂直マージン：オート
4.絶対位置決め要素、トップ：50％;変換：移動Y（-50％）。[究極のパーティー
ケース]
絶対位置決め要素は、垂直、水平中心
左：50％;トップ：50％;変換：（-50％、 - 50％）を変換。
行ブロックカセットカートリッジとの間の差
1.線幅カートリッジを高く設定することができない、すべての寸法は、垂直方向のスペースが、水平方向のマージン、境界線を占有しません
パディングすることができます。効果的なカートリッジのすべてのブロックサイズ。
ボックスをブロックしないが2行は、所定の位置にカセットを切り捨てています。
3.行を終了するために他のカートリッジの端部と整列カートリッジのみ正常流量ライン（フローティングブロックを上書きする絶対位置をカートリッジに変換されます）、
アクセス。多くのブロックカートリッジ位置決めシステムは、それぞれが独自のルールに配置された位置決めシステムがあります。
4.行とボックス間の線は、内部的に折り畳まれている空のボックス。ボックスをブロックしません。
疑似クラスセレクタ：
1：ホバー、マウス懸濁効果
2：アクティブ/ボタン活性化効果素子（ボタン）
3：リンク、未訪問のスタイル要素
4：は、訪問したスタイル要素を訪問しました
図5は：確認、または選択された単位パターンから選択され
スタイルフォーム集束素子6：フォーカス、
7：のfirstChild、最初の子要素
8：lastchild、最後の子要素
9：nthchild（2）、第2のサブ要素。
10：nthchild（2N）/：nthchild（偶数）、偶数番目のサブ要素。
11：nthchild（ODD）、奇数番目のサブ要素
擬似要素セレクタ
1. ::前に、サブ要素は、内部的に最初の子として、生成され、それを選択します
2. ::後、サブ要素が内部で生成され、最後の子要素として、それを選択し、
3：選択、マーキーテキストを選択
サフィックス\ 0：IE5〜IE7
接頭辞*：IE5〜IE7
接頭辞
_
：IE6 IE5〜
Colorプロパティ、IE以外のブラウザが緑になるように、IE5〜IE6の赤、IE7茶色、IE8〜IE11は黒
色：緑;
カラー\ 0：黒;
*
茶色;
_
赤色;
ブロックは非常に計算あって高さに対する割合が、但し有効であるブロックの高さを含みます
HTMLは100％に設定し、それは、ビューポートの高さです。
CSSフレームワーク
ブートストラップ
概念：優先移動端末、応答グリッドシステム（レイアウト960）