記事ディレクトリ
1箱モデル
いわゆるボックスモデルでは、HTMLページの要素を、コンテンツを保持するコンテナーである長方形のボックスと見なします。各長方形は、要素コンテンツ、パディング、境界線、およびマージンで構成されています。
1.1ボックスの境界線（境界）
境界線のサイズと境界線のスタイル属性を設定できます
ボーダーコーナーの半径も設定できます
ボーダー半径
1.2パディング
padding属性は、パディングを設定するために使用されます。ボーダーとコンテンツの間の距離を指します。
padding-top：上パディング
padding-right：右パディング
padding-bottom：下パディング
padding-left：左内側マージン
paddingプロパティを設定すると、独自のボーダーサイズに影響します
1.3マージン
marginプロパティは、外側のマージンを設定するために使用されます。マージンを設定すると、要素間に「空白」が作成されます。この空白は通常、他のコンテンツには使用できません。
margin-top：上マージン
margin-right：右マージン
margin-bottom：下マージン
margin-left：上マージン
マージン：上マージン、右マージン、下マージン、左マージン
値の順序はパディングと同じです。
1.3.1ボックスの中央揃えを実現するための外側のマージン
ボックスを水平方向に中央揃えにするには、次の2つの条件を満たす必要があります。
- ブロックレベルの要素でなければなりません。
- ボックスには幅（幅）が必要です
次に、左右のマージンをautoに設定して、ブロックレベルの要素を水平方向に中央揃えにします。
この方法は、実際の作業でWebページのレイアウトによく使用されます。サンプルコードは次のとおりです。
マージン属性margin：0px autoを設定します。
1.3.2中央揃えの画像とテキストボックスの背景の違い
-
テキストの水平方向の中央揃えはtext-alignです：center
-
ボックスの左右のマージンを水平に自動に変更します
-
製品のディスプレイなど、最もよく使用する画像を挿入します
-
背景画像私たちは通常、小さなアイコンの背景または非常に大きな背景画像を使用します
text-align：center; / *テキストは水平方向に中央揃えされます/
margin：10px auto; /ボックスは水平方向に中央揃えされ、左右のマージンがautoに変更されて幅が広くなります* /
1.3.3要素のデフォルトの内側と外側のマージンをクリアする
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
注：インライン要素には左マージンと右マージンのみがあり、上マージンと下マージンはありません。内部マージンは、ie6などの低バージョンのブラウザーでも問題が発生します。インライン要素の上下の内側と外側のマージンは指定しないようにしています。
1.3.4隣接するブロック要素の垂直マージンのマージ
2つの隣接するブロック要素が出会うとき、上部の要素に下部のマージン下部があり、下部の要素に上部のマージン上部がある場合、それらの間の垂直間隔はマージン下部とマージン上部ではありません合計ですが、 2つのうち大きい方です。この現象は、隣接するブロック要素の垂直マージンのマージと呼ばれます（マージンの縮小とも呼ばれます）。
これらの2つのdivは互いに隣接しています。**上部のdivはmargin-bottom：100pxで設定され、下部のdivはmargin-top：100pxで設定されますが、それらの間の間隔は100 + 100pxではなく、最大のものです。 、**書くときは特に注意してください。
1.4ボックスモデルのレイアウトの安定性
ボックスモデルの学習を開始して、生徒にとって最大のパズルは、内側と外側のマージンの使用、内側のマージンを使用する場合、および外側のマージンを使用する場合を区別できないことですか？
答えは、次のとおりです。実際、ほとんどの場合、それらは混合できます。つまり、内側のマージンまたは外側のマージンを使用できます。便利な方を使用してください。
ただし、使用するのに最適なものは常にあり、安定性に応じて分割します。提案は次のとおりです。
幅（width）の最初の使用に従って、パディング（パディング）、次に外側マージン（マージン）が続きます。
width > padding > margin
理由：
- マージンにはマージンのマージとie6（hate）でマージンを2倍にするバグがあるため、最後に使用されます。
- パディングはボックスのサイズに影響し、追加および削除する必要があります（面倒）。
- 幅（ヒップ）は問題ありませんが、幅残り法と高さ残り法を併用することが多いです。
1.5 CSS3ボックスモデル
CSS3では、box-sizingによってボックスモデルを指定できます。これはcontent-box、border-boxとして指定できるため、ボックスサイズの計算方法が変更されました。
次の2つの状況に分けることができます。
1.ボックスのサイズ：content-boxボックスのサイズは幅+パディング+ボーダーcontent-boxです：この値はデフォルト値であり、要素がW3C標準のボックスモードを維持できるようにします
2.ボックスのサイズ：境界ボックスのボックスサイズは幅です。つまり、パディングと境界が幅に含まれます。
注：上記の幅はCSSプロパティで設定されたwidth：lengthを参照し、コンテンツの値は自動的に調整されます。
端的に言えば、中心、border-boxとは何ですか？これは境界の中心にあり、コンテンツによって境界のサイズが変化しないことを優先します。
content-box（デフォルト値）：これはコンテンツの中央に配置され、ボックスのサイズは幅+パディング+ボーダーであり、パディング、マージン、コンテンツの変更に応じて形状が変化します。**
1.6ボックスシャドウ
> box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色 内/外阴影；
- 最初の2つの属性を書き込む必要があります。残りは省略できます。
- 外側のシャドウ（アウトセット）。ただし、デフォルトの内側のシャドウインセットを書き込むことはできません。
