海外記事のボックスモデルの話_html/css_WEB-ITnose

海外の記事からのボックス モデルについての話

免責事項: フロントエンドに慣れていないベテランとして、知識の理解には間違いなくいくつかの偏りが存在することを読者の皆様に思い出していただきたいと思います。ここで、ははは。ボックスモデルを理解することがCSS全体を学ぶ鍵になると私は考えています。この記事は http://www.chinaz.com/design/2010/1229/151993.shtml (翻訳) を参照し、http://www.sitepoint.com/web-foundations/css-box-model/ を再翻訳しています。 (純粋な英語) この記事は、私自身の理解を加えて、ボックス モデルについて説明します。

外国語翻訳:

ボックス モデルの概念と、ボックス モデルが要素の最終的なサイズをどのように決定するかを理解すると、Web ページ上で要素がどのように配置されるかを理解するのに役立ちます。ボックス モデルは主にブロック レベルの要素で動作します。ちなみに、関連する概念: インライン レイアウト モデル - インライン要素の配置方法を定義します (詳細は「インライン書式設定」を参照)。

ボックスのサイズを計算する

CSS2.1では、ブロックレベルの要素は長方形として表示されます。ブロックレベル要素の全体のサイズを計算するには、コンテンツ領域の幅と高さに加えて、この要素に割り当てられたすべてのマージン、パディング、境界線を含める必要があります。

要素の幅と高さの属性を宣言して定義することで、要素のコンテンツの幅を定義できます。宣言が指定されていない場合、この要素の幅と高さのデフォルト属性はブラウザのデフォルトです。

静的要素 (位置決めなし) と相対位置決めのある要素の場合、その幅はデフォルトです。つまり、この要素の幅は、その要素を含むブロック (つまり、最も近い親要素) の幅からすべての水平マージン、パディング、およびパディングを差し引いたものになります。境界線とスクロールバー。つまり、要素の幅は、その要素を含むブロックの幅から、水平方向のマージン、パディング、ボーダー、およびスクロールバー (存在する場合) の幅を引いたものになります。

包含ブロックのサイズと位置は、その子要素のサイズと位置への参照です。要素は、それを含むブロックに従って配置されますが、正確に含むブロックに従って配置されるわけではありませんが、これらの要素は、その含むブロックからオーバーフローする可能性もあります。ほとんどの場合、生成されたボックスは、サブボックスのブロックを含むものとして機能します。包含ブロックの詳細については、「包含ブロック」を参照してください。

したがって、Web ページ内で要素に必要な全体のスペースを把握するには、コンテンツ領域のパディング、境界線、およびマージンを追加する必要があります。もちろん、要素にはパディング、ボーダー、またはマージンが設定されていない場合があります。その場合、そのサイズは独自のコンテンツによってサポートされます。

列: 浮動要素とその幅

元々、CSS2 では、宣言された幅のない浮動要素はコンテンツをしっかりとラップするために縮小されませんでしたが、代わりにその親要素はそのまま残ります。同じ幅。 CSS 2.1 では、この状況が変更され、幅が宣言されていない浮動要素はコンテンツをしっかりとラップするようになりました。ただし、IE6 以前では、幅が宣言されていないフロート要素は、その子要素の 1 つがレイアウトされていない限り、デフォルトでコンテンツをしっかりとラップします。その場合、フロート要素の幅は、使用可能なコンテンツ領域全体を埋めるように伸びます。幅が設定されていないフローティング要素に右フローティングの子要素が含まれる場合、フローティング要素の幅はその親要素と一致することについて説明する必要があります。このフローティング状況は、IE7 を含む以前の IE ブラウザに存在しました (バージョン 2.0 を含む以前の Firefox にも存在しました。実際、これはバグです。ただし、この問題は Firefox3.0 Alpha 6 バージョンで解決されました)。

したがって、上記のバグを回避するには、Web ページをレイアウトするときに常に安全なフローティング要素の幅を明確に設定するようにしてください。ただし、上記の問題に注意を払う限り、幅のない浮動要素は、流動幅の水平メニューなどの特定の状況では常に便利であることがわかります。 width auto (固定位置の設定を含む) を使用すると、コンテンツをしっかりと収めるために、生成されたボックスのサイズが縮小されます。

高さが設定されていない場合、または最小高さと最大高さが設定されている場合、コンテンツ領域がどのように配置されていても、その高さはコンテンツの高さと一致します。

要素にフロート要素または絶対配置要素のみが含まれている場合、その要素にはコンテンツがなく、高さは 0 になります。この問題については、「フローティングとクリアリング」の記事で詳しく説明します。

ボックスモデルの実装

幅の合計 = 左マージン + 左ボーダー + 左パディング + 幅 + 右パディング + 右ボーダー + 右マージン

高さの合計 = 上マージン + 上ボーダー + 上部パディング +高さ + 下のパディング + 下の境界線 + 下のマージン

次の小さなケースがボックス モデルを最もよく表しています。計算を使用して、Web ページ上に要素を表示するために必要なスペースを計算します (マージンの縮小は無視します。これについては後で詳しく説明します)。次のように:

.box {

width: 300px;

height:200px;

padding:10px;

border:1px Solid

magin: 15px;

}

これは CSS のケースです - クラス名 box を持つ要素のすべてのボックス属性を宣言します:

上記のボックス全体のサイズを次のように計算します:

合計幅 = 15+1+10+300+10+1 +15 =352px;

合計の高さ = 15+1+10+200+10+1+15=252px;

下の画像は、Firebug を通じてキャプチャされた特定のサイズを示しています。

上の画像では、コンテンツ領域 (青い部分) が中央に配置され、パディング、境界線、マージンで囲まれていることがはっきりとわかります。コンテンツ領域の外側のエッジはコンテンツ エッジまたは内側のエッジと呼ばれ、パディング領域の外側のエッジはボーダー ボーダー エッジと呼ばれます。この領域は、ご想像のとおり、マージン エッジまたは外側エッジと呼ばれます。

この小さなケースからわかるように、この要素を Web ページに表示するには、少なくとも幅 352 ピクセル、高さ 252 ピクセルのスペースが必要です。使用可能なスペースがこれよりわずかに小さい場合、要素の位置がずれたり、要素がはみ出したりすることがあります。 IE6 以前のバージョンでは、この要素を収容するために、この要素を含む最も近い親要素を可能な限り拡大するため、Web ページのレイアウトが乱れることに注意してください。他のブラウザでは要素のオーバーフローが許可され、オーバーフローしたコンテンツは無視されます。

ボックスモデルの実践的な応用

要素の幅が 100% に設定されている場合 (つまり、幅が親要素から 100% 継承されている場合)、この要素にはマージンがあってはいけないことに非常に注目してください。パディング マージンと境界線。要素により多くの表示スペースが必要になります。この現象はデザイナーによって見落とされることが多く、コンテンツがオーバーフローしたり、要素が必要以上に広くなったりするため、Web レイアウトが著しく混乱する可能性があります。

ほとんどの場合、これを回避する方法は、特定の幅値 (自動値ではない) の追加を避け、代わりにマージン、パディング、境界線を適用することです。標準フローの要素の width 属性は、margin、padding、border が設定されている場合でも、使用可能な幅の領域がいっぱいであると見なされます。

もちろん、この方法は場合によっては機能しません。たとえば、要素が標準フローの要素ではなく、固定幅が必要な場合です (前述の浮動要素が親要素を埋めるために自動的に伸縮しないのと同じです) ）。この現象が発生した場合、2 つの選択肢があります。

利用可能なスペースが固定幅の場合、要素にさまざまな属性値 (マージン、パディング、幅など) を設定するだけで、利用可能な属性値の合計がちょうど利用可能なスペースの幅と一致します。たとえば、利用可能なスペースの幅が 500 ピクセルで、要素に 20 ピクセルのパディングが必要な場合は、幅を 460 ピクセル、パディングを 20 ピクセル (20+460+20=500) に設定できます。このメソッドの前提条件は、幅の値と要素のボックス属性が同じ測定単位を使用することです。これは、混合単位 (200px + 10% など) を合計したくないためです。内容は意味がありません）！

流体レイアウトなど、利用可能なスペースの幅が不明な場合は、パーセンテージとピクセルを追加できないため、この方法は機能しません。この場合、解決策は要素の幅を 100% に設定し、ネストされた要素のパディング、ボーダー、マージンの値を設定することです。このネストされた要素には特定の幅が設定されておらず、親要素に干渉することなく必要なパディング、境界線、およびマージンを表示できます。

このドキュメントで検討するボックス モデルの前提は、ブロック レベル要素のボックス モデルであり、主に次の側面から説明されます:

1. ボックス モデルは、表示に必要なスペースの実際のサイズを計算します。 Web ページは標準フローと切り離しに分けられます。 標準フローには 2 つの状態があります。

1) 標準のフロー状態では、要素の幅は宣言されておらず、要素の幅はデフォルトで親要素の幅になります。幅を宣言すると宣言した幅で表示され、幅が親要素を超えるとオーバーフローが発生し、オーバーフロー部分は非表示になりません。

ここに例があります:

HTML のコード:

コラム:マージンマージに注意

上記の計算では、要素が必要とするスペースサイズにマージンが計算されていますが、標準フローにおける垂直方向は隣接する要素のマージンが結合され、結合されたマージンは 2 つのうちの大きい方になります。つまり、隣接する要素間で要素に必要な実際のスペースを計算する必要はありません。要素のマージンの端からのみ計算され、小さいマージンは最大のマージンに置き換えられます。マージンは飲み込まれ、より大きなマージンに統合されます。詳細な説明については、「マージンの縮小」を参照してください。

CSS中の代コード：

.box1 {

200px;

高さ: 200px;

background-color: ピンク;カラー:ホワイト;

}

は、Firefox では次のように表示されます。

青いボックスには幅が設定されておらず、その幅はデフォルトで親要素のピンク色のボックスの幅。ただし、青のボックスに設定した幅が親ボックスのピンクのボックスよりも大きい場合、青のボックスが溢れて覆ってしまいます

2) 標準フローから離れる場合、幅を auto または Absolutely に設定したフローティング要素の場合配置された要素または固定的に配置された要素は、親要素と同じ幅を維持するのではなく、コンテンツをしっかりとラップします。

上記の例の box2 の設定は次のとおりです。

.box2 {

幅: 自動; background-color:blue;

color:white;

float:left ;

それ青いボックス (box2) の幅が auto の場合、親ボックスと同じ幅は維持されず、コンテンツ領域をしっかりと包み込むことがわかります。

3) 親ボックスと子ボックスの両方がフロートに設定されている場合、親ボックスは、幅を設定しなくても、IE7 および以前のバージョンの親要素の幅と一致します。他のブラウザではしっかりとラップされます。その子要素。