(1) ボックスモデルの役割:
Web ページをレイアウトし、ボックスとコンテンツを配置します
(2) ボックス モデルの重要なコンポーネント:
- コンテンツ領域 - 幅と高さ
- 内側の境界線 - パディング (コンテンツとボックスの端の間に表示されます)
- 境界線 - 境界線
- 外側の境界線 - マージン (ボックスの外側に表示されます)
(3) ボックスモデル - 境界線
属性名：ボーダー(bd)
属性値：枠線の太さ、線種、色（順不同）
一般的に使用される線のスタイル: 実線-実線破線-破線点線-点線
- 一方向の境界線を設定します。
- 属性名: border-position noun (bd+位置名詞の頭文字 (上-上 下-下 左-左 右-右))
- 属性値：枠線の太さ、線種、色（順不同）
(4) ボックスモデル - パディング
機能: コンテンツとボックスの端の間の距離を設定します。
属性名: パディング/パディング位置名詞
- パディング多値の書き込み方法：
| 値の数 | 例 | 意味 |
| 価値 | パディング:10px | 4 方向すべてのパディングは 10 ピクセルです |
| 4つの値 | パディング:10px 20px 40px 80px | 上: 10px 右: 20px 下: 40px 左: 80px |
| 3つの価値観 | パディング:10ピクセル 40ピクセル 80ピクセル; | 上: 10px 左右: 40px 下: 80px |
| 2つの値 | パディング:10px 80px | 上下：10px 左右：80px |
(5) ボックスモデル - サイズ計算
- デフォルト: ボックス サイズ = コンテンツ サイズ + 境界線サイズ + パディング サイズ
- ボックスにボーダー/パディングを追加するとボックスは大きくなりますが、マージンを追加しても大きくなりません
- 解決する：
- 手動減算: 境界線/パディングのサイズを縮小します。
- 内部縮小モード: ボックス サイズ: ボーダー ボックス
(6) ボックスモデル - マージン
機能: 2 つのボックス間の距離を広げるため、大きなボックスをサポートするためではありません。
属性名: マージン
ヒント: これは、padding 属性値と同じように記述され、同じ意味を持ちます。
margin: 0 auto; ==> バージョンの中央揃えを実現します (ボックスの幅は事前に設定する必要があります)。