CSS ボックスモデルのアルゴリズムとアプリケーションの詳細な説明

ここでは、ブロックレベルボックスのデフォルトの幅、幅のない絶対配置ボックス、幅のないフローティングボックスなどを中心に、CSS ボックスモデルの概念と応用について説明します。この記事を学習することで、CSS ボックスモデルの概念と使用法について深く理解できるようになると思います。

CSS ボックスモデル

Web デザインにおけるすべての要素は長方形のボックスです。ボックスのサイズを正確に計算する方法については、以下の図を参照してください。

Firebug ユーザーであれば (基本的にフロントエンドに関連するものはすべて Firebug を使用します - Sugar と Tomatoes)、以下の表によく馴染みがあるでしょう。

このチャートは、ページ上の任意のボックスに作用する値を表示するのに最適です。

上記の両方の例では、余白が白であることに注意してください。マージンはボックス自体のサイズには影響しないという点で特別ですが、

ボックスに関連する他のコンテンツに影響するため、マージンはボックスモデルの重要な部分です。

ボックス自体のサイズは次のように計算されます。

幅 = 自身の幅 + 左パディング + 右パディング + 左ボーダー + 右ボーダー

高さ = 自身の高さ + 上部パディング + 下部パディング + 上部ボーダー + 下部ボーダー

未宣言の値

パディングまたはボーダーが宣言されていない場合は、ゼロ（cssreset を使用する場合）またはブラウザのデフォルト値（通常はリセットされないフォーム要素の場合は特に、ゼロ以外の値になる可能性が高い）になります。

ブロックレベルボックスのデフォルトの幅

幅が宣言されておらず、ボックスが静的であるか、CSS ボックスモデル内で相対的に配置されている場合、幅は 100% のままで、パディングと境界線は外側に広がるのではなく内側に押し込まれます。

ただし、ボックスの幅を明示的に 100% に設定すると、パディングは外側に拡張されます。

ボックスのデフォルトの幅は実際には 100% ではなく、残りの可能な値 (つまり、残りの実際の幅、つまり砂糖とトマト) であることに注意してください。この特別な値は、多くの場合、幅を設定/設定解除するのに非常に便利なので、知っておく必要があります。

私が抱えていた最大の問題は、textarea 要素でした。textarea 要素は、「cols」属性の希望する幅に設定する必要があり、子要素を含めることはできません。そのため、通常はテキストエリアの幅を明示的に 100% に設定する必要がありますが、パディングがある場合はテキストエリアの幅が拡張されます。固定幅環境では、通常、これを適切なピクセル値の幅に設定できますが、可変幅環境ではそうはいきません。

幅のない絶対位置のボックス

CSS ボックスモデルで幅が指定されていない絶対位置のボックスは、動作が少し異なります。幅は、含まれるコンテンツに応じて適切である必要があります。したがって、ボックス内に単語が 1 つしかない場合、ボックスの幅はその単語の表現と同じになります。 2単語になると、ボックスの幅もそれに応じて大きくなります。

これは、ボックスの幅が親要素（相対的に配置された最も近い親要素またはブラウザウィンドウ）の幅の 100% に達するまで続き、その時点でボックスは折り返されます。
ボックスは、含まれるコンテンツに合わせて垂直方向に拡張するのが自然です。驚くべきことは、プラットフォームによってテキストの動作が異なるだけでなく、ブラウザによってテキストの処理方法にも多くの癖があることです。

幅のないフロートボックス

幅のない絶対配置ボックスと同じように動作します。 CSS ボックスモデルの幅は、含まれるコンテンツの幅、つまり親要素の幅まで拡張する必要があります (親を相対的に配置する必要はありません)。これらの幅のないボックスは壊れやすいため、全体的なページレイアウトなどのミッションクリティカルなパターンには依存できないという教訓が得られます。サイドバーとして使用するために列をフロートし、内部要素 (画像など) がその幅を制御することを期待すると、問題が発生します。

インライン要素もボックスである

ここでは、ブロックレベル要素のボックスに焦点を当ててきました。ブロックレベル要素をボックスと考えるのは簡単ですが、インライン要素もボックスです。これらは非常に長くて狭い長方形と考えることができます。他のボックスと同様に、余白、パディング、境界線を持つこともできます。

折りたたむと少しわかりにくくなります。上記の左余白はボックスを右に押し出しますが、ボックスが始まる最初の行でのみ機能します。パディングは通常、テキストの上部または下部に適用されます。行が区切られると、前の行のパディングは無視され、行の高さで必要な位置から開始されます。背景を透明にすることで、効果がより鮮明に見えるようになります。

詳細については、 http://www.csschina.net/a/jc/css_646.htmlを参照してください。

【編集者のおすすめ】