CSSボックスモデルとは何ですか?

CSS ボックス モデルは、Web デザインでよく使用される CSS テクノロジーで使用される思考モデルです。これはボックス モデルとも呼ばれ、要素コンテンツ (content)、パディング (padding)、ボーダー (border)、および外側マージン (margin) という複数の要素で構成されます (次の図を参照)。

これらの属性は、私たちの日常生活にある箱（ボックス）に置き換えることで理解できます。私たちが日常生活で目にする箱も、物を入れるための箱の一種です。また、これらの属性も備えています。したがって、それらは It's box モードと呼ばれます。

図の最も内側のボックスは、要素の実際のコンテンツ、つまり要素ボックスです。要素ボックスの外側の隣にはパディングがあります。 、次にボーダー（border）、そして最も外側のレイヤーがマージン（margin）であり、ボックスモデルを構成します。通常、設定する背景表示領域は、コンテンツ、パディング、境界線の範囲です。外側のマージンは透明であり、周囲の他の要素を妨げません。

すると、要素ボックスの合計幅 = 要素(要素)の幅、パディングの左右のマージンの値、マージンの左右のマージンの値、境界線の左右の幅;

Element ボックスの高さの合計 = 要素の高さパディングの上マージンと下マージンの値、マージンの上マージンと下マージンの値 +境界線の上下の幅。

構造

コンテンツ (CONTENT) はボックスの中にあるものです;

そしてパディング (PADDING) はボックスの中にあるものを恐れています (損傷により追加された貴重な () フォームまたはその他の耐震付属品。

境界線 (BORDER) はボックス自体です。境界線 (MARGIN) については、ボックスを配置するときにすべてを配置できないことを意味します。隙間を設けることで通気性を確保しながら、取り外しも容易にします。 Web デザインでは、コンテンツはテキスト、画像、その他の要素を指すことがよくありますが、小さなボックス (DIV ネスト) であることもあります。現実のボックスとは異なり、現実のものは通常、ボックスより大きくすることはできません。そうでない場合、ボックスは引き伸ばされてしまいます。壊れています。CSS ボックスは伸縮性があります。中にあるものはボックス自体より大きく、せいぜい伸びますが、破損することはありません。

パディングには width 属性のみがあり、各 HTML タグはボックスとみなすことができます;

以上がCSSボックスモデルとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。