フロントエンドは、新しい視点から CSS ボックス モデルを深く理解しようとします (2)_html/css_WEB-ITnose

前回の記事からの続きです。
長方形領域の各属性の値については、margin のみが負の値を取ることができ、width と margin のみ auto キーワードを取ることができ、border はパーセンテージにすることができず、他の属性は正の数値または正のパーセンテージのみを取ることができます。 marginとpaddingで設定される値は、ブロック領域の垂直方向の高さであり、コンテンツの幅と高さが変化すると、この領域の長さと幅も変化します。境界線は独自の幅を設定し、その長さも対応する辺の長さに応じて変化します。パディングとボーダーの値は、特定の条件に基づいて自動的に変更されず、一度設定すると変更されません。マージンの値は自動的に変更できますが、通常、変更の条件はスペースによって制限されます。幅と高さの値が auto である場合、コンテンツの変更に応じて値を変更できるのは、幅と高さの属性のみです。以下では、それらをブロックレベルとインラインで、そしてそれぞれの場合において水平方向と垂直方向で個別に説明します。
1. ブロックレベルの長方形領域内:
横方向では、幅が固定値に設定されていない場合、つまり値が auto の場合、幅属性は可能な限り広くなる傾向があります。 、幅とマージンが同時に自動に設定されている場合、マージンの値はブラウザによって 0 にリセットされます。 widthに固定値が設定されている場合、ドキュメントフローからはみ出しても、親要素のコンテンツ領域を超えても、その値は固定されます。

1. 幅が auto に設定されている場合、この場合の幅には原則があります: コンテンツ領域がレイアウト コンテキスト (親要素のコンテンツ領域) 内にある場合、その幅は可能な限り大きくなります。 。正のマージンによりコンテンツ領域がレイアウト コンテキストを超える場合、またはパディングとボーダーがレイアウト コンテキストの幅より大きい場合、その幅の値は 0 になります。幅が 0 であっても、コンテンツはまだ存在し、パディングとボーダーは属性値は変更されません。ただし、別の状況があります。つまり、パディングとマージンが同時に存在する場合、正のマージン右は要素の長方形領域を親要素のコンテンツ領域から離れることができず、その値は無効ですどんなに大きくても。正の margin-left は、要素の長方形領域が親要素のコンテンツ領域から離れることを意味します。もう 1 つの特別な原理は、マージンが負の場合、負の数値の影響でコンテンツ領域がレイアウト コンテキスト内を移動し、対応する距離だけレイアウト コンテキストの外側に移動することです。一方の側のマージンが負の数である場合、もう一方の側のマージンに値がない、もう一方の側のマージンが正の値を持つ、もう一方の側のマージンが負の値を持つという 3 つの状況が考えられます。 反対側の余白に値が無い場合は、幅は伸び続けます。反対側のマージンが正の値の場合、正の数の大きさに応じて、負のマージンの位置と正のマージンの位置がコンテンツ領域の両側として使用され、幅のサイズが決まります。プラスのマージンが伸びる位置とマイナスのマージンの位置が一致すると、幅は0になります。反対側のマージンが負の値の場合、コンテンツ領域の両側がレイアウト コンテキストの外側に左右に広がります。
2. 幅が固定値に設定されている場合、この状況は結局のところ、変更できるのはマージンだけであるように見えます。このとき、コンテンツエリアの両側に左右のパディングを同時に追加すると競合は発生しませんが、左右のマージンを同時に追加すると競合が発生する可能性があります。幅は固定なので、片側の余白を固定すれば反対側の余白も固定されますが、反対側の固定値が設定した値と異なる場合があります。このとき、長方形の領域が制限されるため、左右のマージンが競合する場合は、まず左のマージンを満たしてから対処します。相互に競合する場合は、上のマージンが最初に満たされます。たとえば、両側に負のマージンがある固定幅の場合、要素は最初に左に移動します。水平方向の中央揃えに関する特別な使用法もあります。つまり、左右のマージンが自動に設定され、幅が固定値である場合、コンテンツ領域はレイアウト コンテキスト内で水平方向の中央揃えになります。
左右の負のマージンには特別なルールがあります。つまり、左のマージンが負で要素がブラウザを超える場合、要素は実際には非表示になり、ブラウザの下にスクロール バーを形成しません。右マージンが負の値で、要素がブラウザの外側に移動した場合、ブラウザの下にスクロールバーが形成されるため、要素は消えません。また、通常の状況では、親要素の高さがすべての中国語文字を収容できるほど高くなく、親要素がオーバーフロー属性を設定していない場合、中国語の文字は自動的に折り返されます。漢字の内容が親要素を超えます。単語を折り返す必要がある場合は、それを許可する親要素の高さに加えて、word-wrap 属性と word-break 属性も設定する必要があります。

垂直方向では、垂直方向ではマージンをマージできますが、水平方向ではマージンをマージできないため、垂直方向の状況は水平方向よりも複雑になります。垂直方向の高さ属性は、デフォルトでは幅と同様に可能な限り伸びることはありませんが、コンテンツの高さに対して可能な限り小さくなるように努めます。このように、高さが自動で、親要素に追加または境界線のスペースがない場合、ブロックレベルの最上位の子要素とブロックレベルの最下位の子要素のマージン範囲は、コンテンツ領域内に収まりません。それらのマージン範囲は親要素のマージン範囲と同じであり (両方とも親要素の外側のマージンスペースです)、マージ効果があります。親要素にボーダーまたはパディングがある場合、これら 2 つのスペースにより、ブロック レベルの最上位および最下位の子要素のマージン スコープがレイアウト コンテキストを超えないようにブロックされ、親要素の高さの値が増加します。また、パディングまたはマージンがパーセンテージに設定されている場合、パーセンテージの参照は、垂直方向または水平方向に関係なく、親要素の幅であることに注意してください。レイアウト コンテキストでは、各ブロック レベルのサブ要素間の相対位置は一定です。サブ要素の位置が変更されると、元のサブ要素と同じ相対位置を維持するために、その下のサブ要素も変更されます。対応する位置が変わります。負のマージンの場合、親要素の高さが auto であるかどうかに応じて、負のマージンの動作が異なることに特別な注意を払う必要があります。この違いは主に最後のブロック レベルの子要素に反映されます。前述したように、margin-top の値が margin-bottom の実装と競合する場合は、ブロック レベルの値が最初に実装される必要があります。子要素はレイアウト コンテキスト内にあり、マージンに応じて位置を自由に調整できるため、最初のサブ要素と中央のサブ要素の間で margin-top と margin-bottom が競合することはありません。最後のブロック レベルのサブ要素。ブロック レベルの子要素の最後の margin-bottom が親要素のコンテンツ領域の下限に影響するため、下限が可変の場合、競合は発生しません。 . 下部境界が不変の場合、競合が発生する可能性があります。変数下部境界と不変下部境界の違いは、親要素の高さが auto であるかどうかによって決まります。 height が auto の場合、ブロック レベルの子要素のすべての負のマージンは親要素を短くする効果があります。高さが固定値の場合、最後のブロック レベルの子要素の margin-bottom は効果がありません。

2. インライン長方形領域:
インライン長方形領域 (ボックス モデル) はより単純です。まず、インライン長方形領域の幅と高さの設定は無効であり、コンテンツのサイズに応じてサイズが自動的に調整されるだけです。マージンに関しては、マージンの垂直方向の設定は何の効果もありません。マージンは結局のところ行ボックス内にあるためであり、マージンは行間隔を変更することはできません。水平方向のマージンには、対応する効果が生じる可能性があります。同じパディングと境界線の垂直設定では行間隔は変更されません。そのため、何らかの効果をもたらす背景または色がない限り、効果はありません。たとえば、隣接する 2 つの行の内容はカバーされますが、行はカバーされます。間隔は変わりません。水平設定にも対応する効果があります。