- ボックスモデル
- フロートフロート
まず、ボックスモデル
（1）コンテンツのコンテンツ領域
widthそしてheight、表示領域枠コンテンツ-テキストボックス、および他のボックスなどを使用して、使用することもでき、ネストされたサブ要素を表すmin-width、max-width、min-height、max-height設定された最小/幅と高さの最大限界まで。デフォルトでは、widthとheightそれがボーダー、パディング、マージンを含まないコンテンツ領域の唯一の幅と高さを、含まれています。使用して、box-sizingコンテンツ、パディング、ボーダーを含むようにすることができます
box-sizing値：
/ * デフォルト値は、唯一のコンテンツ領域含む標準ボックスモデル* / ボックス -sizing：のContent ボックス; / * widthとheightプロパティは、コンテンツ、パディングとボーダーを含むが、ない余白* / ボックス -sizing：境界線を-box;
コンテンツ領域が大きすぎる場合、それがオーバーフローする、あなたは、オーバーフローを使用することができます
オーバーフロー値：
/ * デフォルト。コンテンツは剪定されることはありません、ボックス要素の外に表示されます * / オーバーフロー：目に見える; / * コンテンツがトリミングされ、残りの内容は表示されません * / オーバーフロー：隠された; / * コンテンツが削除されます、ブラウザがスクロールバーが表示されます残り参照するために、 * / オーバーフロー：スクロール; / * コンテンツが剪定されている場合、それは、スクロールバーが表示されます、ブラウザによって決定することを * / オーバーフロー：自動;
（2）マージン外縁
マージン崩壊：最大ピッチと下余白によって外側のブロック要素が統合（または縮小）することができるのサイズを取る余白に
- 組み合わせマージン隣接兄弟
- 親と最初/最後の子
- 合わせマージン空きブロックレベル要素
（3）ボーダーボーダー
境界の内側（4）パディング
（5）ブロックタイプ
| 値 | 説明 |
|---|---|
| ブロック | ブロックのブロック（ブロックボックス）が（例えば：別の行にその内容）は、別のフレーム内の積層ブロックとして定義され、モデルのすべてのアプリケーションがフレームブロック（ブロックボックス）に適用されるまで、その幅と高さ、ボックスを設定することができ |
| 列をなして | インラインボックス（インラインボックス）とブロックボックスは反対である、文書のテキストと一緒に（例えばその：それはなり、テキスト、及び周囲の要素に他の行のテキストの一部のような、その内容と同じ行に表示され、同じ線幅と高さの破壊流量）のテキストが無効カートリッジ、パディング、マージンの設置位置を提供し、そしてテキストを囲む境界を更新するが、影響を受けません）ブロック（ブロックボックスを囲む遮断することです。 |
| インラインブロック | インラインブロックフレーム（インラインブロック・ボックス）は、両方のセット：それは新しいラインが、内側フレーム画像列（インラインボックス）の周りに流れるようにテキストと同じ再起動せず、彼は幅と高さを設定することができ、そしてそのプロパティの整合性を維持するなどのブロックブロックブロックのように、それは段落の回線を切断しません。 |
| テーブル | 未処理の要素としての画像処理テーブルレイアウトテーブル、代わりの乱用HTMLの<table>;タグは、同じ目的を達成します。 |
| フレックス | いくつかの長年の伝統的なレイアウトの問題に対処するためのCSSの問題は、例えば、許容範囲の弾力性のシリーズまたは垂直方向の中央コンテンツを配置されています。 |
| グリッド | それは、従来のCSSグリッドフレームに依存しながら、与えられたCSSグリッドシステムを達成するための簡単な方法は、いくつかのトリッキーを処理することは困難です |
第二に、フロート（浮き）
（1）マルチコラムレイアウト浮動
- 2列のレイアウト
- 三つのレイアウト
（2）クリアフロート
clear プロパティ。あなたが要素にこのアプリケーションを置くとき、それは基本的に「ここにストップを浮動」意味-この要素とソース要素の背面が新しいに後でない限りフロートはありませんfloat別の次に宣言アプリケーション要素。
clear 次の3つの値をとることができます。
left：停止すべての活動は、フローティング状態のままright：浮動右のすべての活動を停止しますboth：停止アクティブな浮動周り