HTML + CSSボックスモデルは、より良いタイポグラフィするために、この重要な概念の知識と理解の中核基盤、ページレイアウトです。ここでは初心者のための便利な彼らの蓄積と^ _ ^要約希望のCSSボックスモデルについての知識があります。
A、CSSボックスモデルのコンセプト
また、ボックスモデル（ボックスモデル）として知られているCSS CSSボックスモデルは、いくつかの要素の要素内容（コンテンツ）、パディング（パディング）、ボーダー（国境）、余白（マージン）が含まれています。図：
境界（ボーダー）、続いてブロック最も内側の図である外部フレーム要素の次の要素の実際の内容、すなわち、素子筐体であり、パディングパディングは、次いで、最も外側の層は、余白（マージン）、全体の構成でありますボックスモデル。私たちは、通常背景表示領域を設定し、そのコンテンツ、パディング、ボーダー、この1の範囲です。外側のマージンマージンは透明で、周りに他の要素をブロックしません。
要素フレーム要素（エレメント）の次に、幅=合計幅+ピッチ値+左マージン及び右マージン値+左側ボーダー幅の左右の余白をパディング。
高さ=ボックス要素素子（要素）+トップの上下の余白のパディングの値とボトムマージン+枠の上下幅の値+マージンの高さの合計。
二、CSSマージンマージ（オーバーレイ）
場合出会い、マージンマージ示すように、2つのマージン値の組み合わせ高さの外部からの二つの垂直フレーム要素は、より高いマージンの複合発生に等しい垂直方向に隣接します。
理解しやすいので、ページは時々この要因を検討する実際の必要性に直面しています。以下のようにもちろん、マージンは実際に、存在意義を合併しています：
マージされたストリームからのみ垂直外側ハウジングブロック通常の文書が余白を発生する：ことに留意されたいです。内箱、フロートまたは絶対位置の距離との間の線の外側にマージされません。
CSSのリセットも頻繁に使用されます
* { マージン：0 。 パディング：0 ; }
三、ボックスのサイズ変更プロパティの説明
ボックスモデルではなく、CSSのリセットに、このプロパティは、おそらくそれが必要になりますので、ボックスのサイズ変更プロパティは、ユーザーインターフェイスの属性であり、なぜそれをご紹介します。
ボックスのサイズ変更：コンテンツ・ボックス|ボーダー・ボックス|継承。
幅と高さの値は、ボックス要素の内容に適用されるように、（1）コンテンツ・ボックスは、デフォルト値が設定されてもよいです。コンテンツのみが含まれている幅のボックス。
すなわち、全幅=マージン+ボーダー+パディング+幅
（2）境界ボックスの幅の値は、実際のマージンを除いボーダー+パディング+元素の合計幅です。ボックスのボーダー+パディング+コンテンツであって、幅
すなわち、全幅=マージン+幅
多くのCSSフレーム、ボックスモデルの計算方法が簡素化されます。
（3）継承、所定の値は、親要素の属性ボックスのサイズ変更を継承する必要があります
ボーダー・ボックスの使用の場合：
1〜100％である幅ボックス、及び両側の所望の間隔は、比較的良好で、この時間
2つの優れたグローバル設定の境界ボックス、最初のそれは直感的であり、それは、何度も何度も簡単な計算が続く分配されますボックスの幅の割合の通常の使用の境界があるので、 -それはまた、重要な役割を持っています。
第四に、依存小さな問題とボックスモデルに遭遇し、実際の開発と応用。
範囲外の1余白（マージン下マージントップ及びクロスボーダーの問題の最初の子要素の最後の子要素）
例の最初の子へのマージントップ：
親要素が、何の境界線の境界線を持っていない時間の余裕トップ値の最初の子を設定すると、マージントップ値と親要素の現象があるだろう、4つのソリューションがあります。
（1）親要素の境界線に境界線を追加（副作用）
（2）親要素に設定パディング値（副作用）
（3）親要素のオーバーフローを追加するには：隠された（副作用）
（4）親要素の事前生成されたコンテンツを追加します。（推奨）
第四の方法で、例えば：
.parent {
幅：500pxなど。
高さ：500pxなど。
背景色：赤。
}
.parent：{前
内容： "「。
ディスプレイ：テーブル。
}
.child {
幅：200pxの。
高さ：200pxの。
背景色：緑;
マージントップ：は50px;
}
<divのクラス = " 親" > <divのクラス = " 子" > </ div> </ div>
2つのブラウザ間のボックスモデル。
（1）ULデフォルトタグは、Mozillaパディング値であり、唯一のマージンの値IEを有しています。
（2）標準的なIEのボックスモデルとモデルとの差：
上述した標準的なボックスモデルは、モデルは、よりIEのボックスサイズのようなものである：境界ボックス、ボーダーの幅とをさらに含むパディングの内容。テンプレート内のDOCTYPE HTMLを増やす：ソリューションです。
ボックスモデルの三角形のビデオと3
<！DOCTYPE HTML>
<HTML>
<HEAD>
<スタイル>
.triangle {
幅：0 ;
高さ：0 ;
国境：固体100ピクセル透明。
ボーダー -top：100pxに固体青; / * 这里可以设置ボーダー的上、下、左、右四个方向的三角* /
}
</スタイル>
</ HEAD>
<BODY>
<divのクラス = " 三角形" > </ div>
</ BODY>
< / HTML>
ページには、その結果を示しています。
-----------------------
オリジナルリンクアドレスします。https：//www.cnblogs.com/clearsky/p/5696286.html