CSSドキュメントフローにおけるブロックレベルの非置換要素の水平方向の面積の計算ルール(1)_html/css_WEB-ITnose

最近、以前読んだ「CSS Definitive Guide」と CSS 標準を組み合わせて、「Basic Visual Formatting in CSS」を読んでいます。今日はメモを取ってください。
過去に、幅が明確に指定されていないレイアウトに遭遇したとき、感覚に基づいて大まかに推測することはできても、常に少し信頼性に欠けていました。最近この本を見るまでは、とても良い本だと思っていました。

まず、要素には、block、inline、inline-block 属性を表示で指定するだけでなく、置換できる、または置換できないという機能があることを知っておく必要があります。

置換要素: img、video、canvas などの安定した指定されたコンテンツは単なるプレースホルダーであり、実際のコンテンツは後で置き換えられます。 img などのコンテンツは、画像が読み込まれた後に置き換えられます。
置換不可能な要素：div、p、spanなどの内容がドキュメント内に記述されます。
ここで話したいのは主にブロックレベルの非置換要素、つまりp、divなどのblockの非置換要素とliなどのdisplay:list-itemについてです。 li は div や p と表示形式が 2 種類異なるように見えますが、実際には、前のロゴが追加されたことを除けば、li のその他の動作は基本的に同じです。

本題に入りますが、ドキュメントフロー内のブロックレベルの非置換要素の水平方向の書式設定は、それを含むブロックと 7 つの属性 (border-left、margin-left、padding-left、width、padding-right) に関連します。 、マージン右、ボーダー右）。ドキュメント フロー内のブロック レベル要素の包含ブロックは、通常、親ブロック レベル要素のコンテンツ領域を指します。つまり、box-sizing: content-box のときに width で指定される領域です。以下の式があります:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right ' = 包含ブロックの幅

上記の式は、すべての場合に真でなければなりません。しかし、7 つの属性すべての値を設定しても、その合計が含まれるブロックの幅と等しくない場合、または値を auto に設定した場合はどうすればよいでしょうか?という問題がすぐに発生します。それ？ ？実際には、これら 7 つの値のうち、auto に設定できるのは、margin-left、margin-right、width の 3 つの値だけです。まず、これら 3 つのプロパティを自動に設定する状況を見てみましょう。これら 3 つのプロパティは自動または非自動に設定できるため、合計 23.8 の状況があることになります。それらについては個別に説明します:

1. 値を auto に設定します。つまり、margin-left、margin-right、または width が auto に設定されます。これら 3 つの状況は、上記の公式に当てはめるだけで簡単にわかります。

2. 両方の値を auto に設定します。

2.1. margin-left と margin-right は auto に設定され、width は非 auto の値を指定します。この場合、通常の水平方向の中央揃え、margin-left と margin-right は同じ値を取得します。

2.2. margin-left と width は auto に設定され、margin-right は非 auto の値を指定します。 margin-left は 0 にリセットされ、その後 1 になります。

2.3. margin-right と width は auto に設定され、margin-left は非 auto の値を指定します。 margin-right は 0 にリセットされ、その後再び 1 になります。

3. 3 つの値を auto に設定します。 margin-left と margin-right は両方とも 0 にリセットされ、1 に基づいて計算されます。

4. どれも auto に設定されていない場合、CSS では「過剰制約」と呼ばれます。次に、ドキュメントの流れの方向が左から右の場合、margin-right の値は無視され、1 のままになります。この状況が最も誤解しやすいのですが、「過剰制約」とは、上の式の左辺が右辺よりも小さくなるようにすべての値を指定すると理解するとわかりやすいでしょう。 「3つの値が指定されており、変更の余地はない」というのが正しい理解です。したがって、margin-left、width、margin-right にすべて auto 以外の値が割り当てられている限り (たとえ 0 であっても)、それは「過剰制約」になります。

上記の内容はすべての状況をカバーしているように見えますが、そうではありません。 margin-left、margin-right が auto に設定され、width が指定された値を持っているが、border-left+ であるという別の特殊なケースがあります。 padding-left+width+padding-right+border-right> 包含ブロックの幅。上記によれば、margin-left と margin-right は同じ値を取得しますが、実際には、margin-left と margin-right は 0 にリセットされ、その後過剰に制約され、その後 1 が無視されます。