[フロントエンドの研究ノートday23] 3.7。ヒントボックスモデルと関連する問題

3.7。ヒントボックスモデルと関連する問題

ヒントは、モデルと関連する問題をボックス

マージン関連スキル
マージン：要素を設定する1は、水平方向を中心とするX-オート;
2、マージン負素子ように変位境界合併

理解を行使
ブラウザ100ピクセルの上から、ボックス600 * 100ピクセル黒枠を作る、1水平中心。
2、次のメニューの効果を作ります：

マージン合併

二つの垂直マージンが会うとき、彼らはマージンを形成することを組み合わせた余白手段。合わせた高さは、発生の外縁の2つの合成高さの大きいのマージンに等しいです。次のように解決策は以下のとおりです。

図1に示すように、この機能を使用する
2は、外周側から供給される、一般にセットトップマージン
3、又はフロート要素位置を

読解演習
divタグを使用して、以下のレイアウトを作るために：

マージントップ崩壊

提供マージントップボックスの内部に通じる、追加される箱の外側に設けられたマージントップボックス内にネスト2つのボックスに次のように溶液が失敗します。

図1に示すように、フレームは、箱の外側に設けられている
隠された：2、ボックスオーバーフローの外側に設けられている
3、擬似要素クラス：

.clearfix:before{
    content: '';
    display:table;
}

運動はその感謝
を使用し、間隔のマージン、パディングのピッチは次の例を製造しました。