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

css ボックス モデルは、本質的に周囲の HTML 要素をカプセル化するボックスである「ボックス モデル」を指します。これには、マージン、境界線、パディング、および実際のコンテンツが含まれます。すべての HTML 要素はボックスと見なすことができます。モデルを使用すると、他の要素と周囲の要素の境界線の間のスペースに要素を配置できます。

Web デザインでよく聞く属性名: content、padding、border、margin、CSS ボックス パターンには次のプロパティがあります。

「ボックス モデル」という用語は、デザインとレイアウトで使用されます。

これらの属性は、日常生活によくあるもの、つまりボックスの比喩を使用して理解できるため、これをボックス パターンと呼びます。

CSS ボックス モデルは、Web デザインでよく使用される CSS テクノロジーで使用される思考モデルです。

原則

まず、Web ページについて話しましょう: コンテンツ、パディング、ボーダー、マージン、CSS ボックス パターンには次のプロパティがあります。

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

特徴

ボックスには、マージン、ボーダー、パディング、コンテンツ属性の 4 つがあります。

このボックスを見てみましょう。上、下、左、右の 4 つの側面があるため、各属性にはコンテンツに加えて、上、下、左、右の 4 つの部分が含まれます。これらの 4 つの部分は同時に設定することも、個別に設定することもできます。マージンはボックス内のコンテンツと境界線の間の距離として理解でき、境界線は太さと色に分けられます。コンテンツはボックスの中央のコンテンツであり、外側マージンはボックスの外側に自動的に残される空白スペースです。国境。

構造

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

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

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

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

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