ボックス モデルは、CSS の核心です。ボックス モデルとその配置コントロールをマスターすると、ページがどれほど複雑であっても、それが単純に配置され、入れ子になっていることがわかります。ただし、すべての良いものには欠點があり、ボックス モデルには 2 つの異なる解釈があります。1 つは IE6 からのもので、もう 1 つは W3C 標(biāo)準(zhǔn)ブラウザからのものです

コンテンツ領(lǐng)域の外側(cè)、パディング領(lǐng)域、境界領(lǐng)域、および順序領(lǐng)域のマージン、このモデル構(gòu)造はすべての主要なブラウザ間で一貫しています。ボックス モデルを通じて、コンテンツの境界線、空白スペース、およびマージンを設(shè)定できます。ボックス モデルの最も一般的な用途は次のとおりです。コンテンツの一部があり、このコンテンツに境界線を設(shè)定して、境界線を設(shè)定できます。このボックスが他のボックスに近づきすぎないように、境界線にパディングを設(shè)定できます。

これまでのところ、ボックスのサイズを設(shè)定するまではすべてが完璧です

IE6 と W3C 標(biāo)準(zhǔn)ブラウザーではボックス モデルの解釈が異なります

ボックスのサイズを設(shè)定しようとすると、問題が発生しました。 IE6 と W3C 標(biāo)準(zhǔn)ブラウザでは、ボックス モデルの解釈が異なります。この解釈の違いがボックスのサイズに反映されています。以下の図は、2 種類のブラウザによるボックス サイズの解釈の違いを示しています。 IE6 ボックス モデルでは、ボックスのサイズにはコンテンツ領(lǐng)域、パディング、ボーダー、マージンが含まれますが、W3C ボックス モデルでは、ボックスのサイズにはコンテンツ領(lǐng)域のみが含まれ、パディング、ボーダー、マージンは含まれます。箱サイズには含まれません。

IE6のボックスモデルがより合理的な理由

現(xiàn)実の世界では、物理的な箱を説明するとき、サイズについて話す場合、そこに含まれるオブジェクトのサイズを計算するだけでなく、隙間や箱自體も含めることになります。容器の梱包を例に挙げると、花瓶が 100 個あり、花瓶が壊れないように、緩衝材に相當(dāng)する緩衝材を花瓶の周りに詰めます。コンテナを積み込む際、カートン同士の衝突を防ぐため、カートンとカートンの間にはマージンに相當(dāng)するわらが詰められています。カートン全體のサイズと、わらを詰める必要があるカートン間の隙間を追加して、花瓶のサイズだけを報告した場合、運送會社はそれを梱包できないと伝えました。

別の例を挙げると、壁に 10 枚の油絵を掛けたい場合、油絵はフォトフレームで取り付けられます。フォトフレームの境界線は、油絵と絵畫の間の距離に相當(dāng)します。境界線はパディングに相當(dāng)し、間隔はマージンに相當(dāng)します。この例は、誰にとっても、油絵を含むフォトフレーム全體をレイアウトするのが簡単です。 IE6 ボックス モデルを使用した全體 フォト フレーム全體のサイズがわかれば、パディング、ボーダー、マージンなどの要素の影響を考慮する必要はありません。パディング、ボーダーは全體です。 、マージン、これはブラウザ自身の仕事であり、デザイナーが気にする必要はありません。

特定の Web デザインの場合

特定の Web デザイン、特に複雑なグリッド レイアウトが関係する場合、IE6 のボックス モデルの方が制御しやすいため、次のデザイン シナリオを検討してみるとよいでしょう。

1. パネル インターフェイスのデザイン

このページには、ログイン パネル、最新ニュース パネル、投票パネルなどの複數(shù)のパネルが含まれています。このタイプのデザインの一般的なアプローチは、まず背景を使用してこれらを 1 つずつデザインすることです。パネルの外観図で、特定のコンテンツに置き換える必要がある場所は空白のままにしておきます。これらのパネルは、パネルの外観畫像を背景畫像として使用する?yún)gなるボックスです。コンテンツを配置し、パディングを使用してコンテンツを制御します。配置には、マージンを使用してパネル自體の配置を調(diào)整します。パネルのサイズは固定されているため、それに応じてボックスのサイズを設(shè)定する必要はなくなります。サイズの問題は、パディングとマージンをどのように調(diào)整しても、パネル自體の構(gòu)造には影響しません。こちらはIE6ボックスモデルです。

W3C ボックス モデルでは、パディングとマージンを調(diào)整すると、コンテンツの配置を調(diào)整するときに、パネル自體の構(gòu)造が崩れる可能性が非常に高くなります。

2. パーセントレベルのサイズ + ピクセルレベルの境界問題

W3C ボックス モデルの設(shè)計で最も問題となるのは、幅が不確かなコンテナがあり、その中に同じサイズの 2 つのボックスを配置したい場合、最も合理的な方法は各ボックスの幅を 50 % に設(shè)定することです。このように、コンテナーの幅がどんなに広くても、2 つのボックスは常にこの幅に自動的に適応します。ただし、実際には、コンテンツの內(nèi)容が表示されないようにするために、パディングやボーダーを設(shè)定しないことが前提となります。 2 つのボックスが互いに接觸しないようにします。近すぎる場合は、パディングを設(shè)定する必要があります。パディングを設(shè)定すると、コンテナーがバーストしていることがわかります。

もちろん、各ボックスの幅を 50% に設(shè)定する代わりに、45% に設(shè)定して、各ボックスに 5% のパディングを追加することもできます。これは解決策ですが、多くの場合、これを使用します。習(xí)慣として、コンテンツの幅は不確実かもしれませんが、パディングを自動的に調(diào)整することは望ましくありません。さらに、多くの場合、適応幅として 1 ピクセルを設(shè)定したいと考えます。この場合、W3C ボックス モデルは問題を抱えます。

この場合、IE6 ボックス モデルには何の工夫も必要ありません。各ボックスの幅を 50% に設(shè)定するだけで、パディングをどのように設(shè)定しても、コンテナーの幅に自動的に適応します。コンテナーが破裂することはありません。