CSSボックスモデル
#### 1.1 マージンの問題
**典型的な状況 1:**
- 構造関係: ネストされたブロック要素の垂直マージンが折りたたまれる
- 問題の説明: 親要素にパディング、マージン、およびボーダーがない場合、子要素は親要素に直接隣接しており、子要素のマージン値が親要素に渡され、親要素のマージン値とマージされます。最終的な結果は正の値になります 2 つの値のうち大きい方、負の値は絶対値が大きい方の値をとります。
- パフォーマンス: 親要素と子要素はマージンを共有します
```css
。親{
幅:100ピクセル;
高さ:100ピクセル;
背景色:赤;
}
。子供{
幅:100ピクセル;
高さ:100ピクセル;
背景色:緑;
マージントップ:100px;
マージン-ボトム:100px;
}
「」
<div class="親">
<div class="子">
</div>
</div>
- 解決
- 親要素にボーダーまたはパディングを設定します（使用には注意してください）
- 親要素のオーバーフロー:非表示、ルールを変更します
**典型的な状況 2:**
- 構造関係: 隣接する要素の垂直マージンが結合されます
- 問題の説明: 2 つのブロック レベルの兄弟要素のマージン値が垂直方向で直接交わる場合、それらはマージされ、最終的には、正の値が 2 つの値のうち大きい方の値をとり、負の値がマージされます。絶対値が大きいほど
- パフォーマンス: 2 つのマージンが 1 つに結合されました
```css
.box1{
幅:100ピクセル;
高さ:100ピクセル;
背景色:赤;
マージン-ボトム:100px;
}
.box2{
幅:100ピクセル;
高さ:100ピクセル;
背景色:緑;
マージントップ:100px;
}
<div class="box1">
<div class="box2"></div>
</div>
「」
- 解決
- マージン値を 1 つだけ定義するようにしてください
- 親要素 `overflow:hidden` をボックスの 1 つに追加して、レンダリング ルールを変更します
・その他の条件は上記と同様【子孫要素での同様の問題等、単純な引き継ぎ】
#### 1.2 概要
- ボックスモデルを実際に使用して、エクスプレスボックスとの違いを比較する質問をする
- ボックス モデルの占有率の計算を要約します: 幅/高さ + パディング + マージン
- 実際の開発プロセスでは、測定された幅と高さがコンテンツの幅なのかパディングの幅と高さなのかに注意するよう学生に注意を促します。
- 余白の値が垂直方向に一致すると、折り目の問題が発生します。
### 2. CSS表示モード
概要: 表示モードとは、要素の表示方法を指します。たとえば、div はデフォルトで 1 行を占め、span はデフォルトで 1 行に配置できます。その特性と分類を知ることで、Web ページをより適切にレイアウトできます。HTML 要素は通常、ブロック レベル要素、インライン要素、インライン ブロック要素の 3 つの表示モードに分類されます。
#### 2.1. 要素のデフォルト表示モードと要素の特性の概要
- プロパティが `display:block` である要素をブロックレベル要素と呼びます
- 共通のブロックレベル要素 div、h1-h6、p、ul、li、dl、dt、ol
- 属性が `display:inline` である要素は行レベル要素と呼ばれます
- 共通の行レベル要素:span、strong、em、i、a、b
- 属性が `display:inline-block` である要素を行レベルのブロック要素と呼びます
- 共通のインライン ブロック要素: img、input (form 要素については後で説明します)
#### 2.2 ブロックレベル要素の機能の概要
- 1行で幅と高さを設定できます
- 幅が設定されていない場合、ブロックレベル要素の幅はその親要素のコンテンツの幅となります。
- 高さが設定されていない場合、ブロックレベル要素の高さはそれ自体のコンテンツの高さになります。
- 上下左右の内余白、外余白を設定できます
#### 2.3 インライン要素の機能の概要
- デフォルトでは幅と高さは設定できず、幅と高さはコンテンツによって異なります
- インライン要素はテキストまたはその他のインライン要素のみを保持できます (ここで注意してください、インライン要素内にブロックレベルの要素をネストしないでください)
・行ラベル間に隙間があり、上下の余白が設定できない
#### 2.4 インラインブロック要素の特徴のまとめ
- デフォルトでは幅と高さを設定できますが、幅と高さはコンテンツによって異なります
- 内側と外側の余白を任意の方向に設定できます
・並べると真ん中にスペースができる
#### 2.5、要素型の変換
特殊なケースでは、要素のモードを変換し、デフォルトの要素モードを別の要素モードの特性を持つように変更し、表示属性を使用して 3 つを任意に変換する必要があります。
- display:inline は inline 要素に変換されます [一般的には使用されません]
- display:block はブロック要素に変換されます [一般的に使用されます]
- display:inline-block はインラインブロック要素に変換されます [一般的に使用されます]