1 ページの生産プロセス
デザイナー -デザイン原案-フロントエンドエンジニア
デザイン案 = フロントエンドエンジニア+ 分割領域+ 充填内容を
異なる領域表現するのに適した要素と、設定領域の位置、大きさ、背景スタイル。
各要素は、ページ上の矩形領域を生成し、 CSSは、前記矩形領域のボックス（BOX）
2. 言っボックスモデルの概要
マージン：外側の境界線、およびボックスから他。
ボーダー：ボーダー
パディング：ボーダー、境界線とコンテンツ内の距離。
Conten 幅とコンテンツの高さ。
一つの要素、その依存ボックスの種類、 CSS の表示属性。
3. ボックスの内容
CSSのサイズの単位
CSS 、値の多くの属性は、寸法によって表す必要があり、値、単位組成の寸法 CSSの共通単位で寸法：PX { ピクセル、小ドットの数によってコンピュータ画面の絶対的な大きさ、各点は画素です}
E M { 要素の現在のフォントサイズに対する相対的なサイズ、（PX）}
{％の割合、異なる内のCSS 特性、異なる意味を有します}
だから、ブラウザの後に計算されたメジャーの他のユニットは、なり PX
パディングパディング、スタッフィング領域意味：上部（に、その境界の間の距離コンテンツを表しトップ）、右側（右）、パディング底下部（下左）、（左）ボックスなど4つの方向、および内部空間との間に充填材;関連CSSは属性：パディングトップ、パディング右、パディング左を。
境界境界の意味：、内側と外側の境界線を分割上部（トップ）、右側（右）、下部（底部）、左側（左）ケース壁に類似する四つの部分を、関連のCSS 特性：ボーダートップフレームに、のborder-right-XXXは、境界線を持っています
border-bottom-XXX 下の境界線、国境左-XXXは、境界線を左ボーダー幅の境界線の太さ、ボーダースタイルの境界線のスタイル、ボーダー色の境界線の色を。
マージンマージン意味：隣接するフレーム間の距離を表し、ボックスは上部（に分割されているトップ）、右側（右）、下（下部左）、（左ボックスとボックスの間の距離と同様四方）を、特にルールは複雑で、視覚的な書式モデルを精巧;関連CSSのプロパティ：マージントップ、余白右、マージン下、余白、左、マージン。
4. ボックスモデルの知識サプリメント
サブボックスフレームカセット（ボーダーボックス：）ボーダー、パディング、コンテンツによる組成、背景要素、境界とデフォルトのカバレッジ[プレゼンテーション]、バックグラウンド・クリップのプロパティを変更します。
充填ボックス（パディングボックス）：パディング、コンテンツ組成物は、厳密な意味では、オーバーフローは、オーバーフローを参照して、充填ボックス[プレゼンテーション]をオーバーフローを意味します。
概要カートリッジ（コンテンツボックス）：コンテンツデフォルトで、構成の幅と高さのプロパティは、それがコンテンツボックスの幅及び高さであり、幅と高さによって設定範囲の、ボックスサイズプロパティの変更、ボックスサイズプロパティ意味：ボックスの幅と高さの設定範囲。
算出した箱の寸法：ボックスのサイズ変更：コンテンツ・ボックスの場合ボックス・サイズ：ボックスボーダーの場合は、ある概要外枠属性を、との使用境界線が正確に。