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

ボックス モデルは、ページ上で HTML 要素が占めるスペースを記述する方法です。ボックス モデルは、各 HTML 要素を長方形のボックスとして扱います。このボックスは、コンテンツ領域、内側の端のパディングという 4 つの主要な部分で構成されます。 、境界線と余白。詳細な紹介: 1. コンテンツ領域は、テキスト、画像、その他のネストされた要素などのコンテンツを実際に含む HTML 要素の一部です。これはボックス モデルの中核であり、要素によって表示される実際のコンテンツを決定します。パディングはコンテンツ領域であり、CSS の要素の境界線と padding-top プロパティの間の空白です。

このチュートリアルのオペレーティング システム: Windows 10 システム、DELL G3 コンピューター。

「ボックス モデル」 (ボックス モデル) は CSS の重要な概念であり、HTML 要素がページ上のスペースを占める方法を説明するために使用されます。ボックス モデルは、各 HTML 要素を、コンテンツ領域、パディング、境界線、およびマージンの 4 つの主要な部分で構成される長方形のボックスとして扱います。ボックス モデルを理解することは、ページ要素のレイアウト方法とレンダリング方法を決定するため、フロントエンド開発の鍵となります。この記事では、ボックス モデルのさまざまなコンポーネントとその機能について詳しく説明します。

ボックス モデルのコンポーネント:

コンテンツ領域:

コンテンツ領域は、実際に次のようなコンテンツを含む HTML 要素の部分です。 text 、images、またはその他のネストされた要素。これはボックス モデルの中核であり、要素によって表示される実際のコンテンツを決定します。

パディング:

パディングは、コンテンツ領域と要素の境界線の間の空白領域です。 CSS で、padding-top、padding-right、padding-bottom、padding-left などのプロパティを使用して設定できます。パディングは、要素の内部コンテンツとその境界線の間の距離を制御します。

境界線:

境界線は、コンテンツとパディングの周囲の線または境界線です。境界線は、border-width、border-style、border-color などのプロパティを使用して CSS で設定できます。要素の内容を装飾したり分離したりするために使用されます。

マージン:

マージンは、要素の境界線と周囲の要素の間の空白領域です。これは、margin-top、margin-right、margin-bottom、margin-left などのプロパティを使用して CSS で設定できます。マージンは、要素と他の要素の間の距離を制御するために使用されます。

ボックス モデルの仕組み:

ブラウザはページをレンダリングするときに、ボックス モデルの定義に基づいて各 HTML 要素の合計の幅と高さを決定します。 。これらの寸法によって、ページ上の要素の位置とレイアウトが決まります。ボックス モデルの仕組みは次のとおりです。

合計幅:

要素の合計幅は、コンテンツ領域の幅に左右のパディングの幅を加えたものと等しくなります。ボーダーに加えて、左上と右上のマージンの幅。

合計幅 = コンテンツの幅 左パディング 右パディング 左境界線の幅 右境界線の幅 左外側マージン 右外側マージン

合計高さ:

要素の合計高さは等しいコンテンツ領域の高さに、上下のパディングと上下の境界線の高さを加え、上下のマージンの高さを加えたものになります。

合計の高さ = コンテンツの高さ、上部のパディング、下部のパディング、上部の境界線の高さ、下部の境界線の高さ、上部のマージン、下部のマージン

ボックス モデルの 2 つの標準:

Web 開発には、W3C 標準ボックス モデルと IE ボックス モデルという 2 つの主要なボックス モデル標準があります。

W3C 標準ボックス モデル:

W3C 標準ボックス モデルは、コンテンツ領域のみを含む要素の幅と高さを扱います。パディング、境界線、およびマージンは要素の全体の幅と高さに影響を与えず、コンテンツ領域に追加されます。

これは Web 標準のデフォルトの動作であり、最新のブラウザーで採用されているボックス モデルです。

IE ボックス モデル:

IE ボックス モデルには、コンテンツ領域、パディング、境界線を含む要素の幅と高さが含まれます。マージンは全体の幅と高さに影響を与えず、要素の外側にあります。

これは、Internet Explorer ブラウザーの初期バージョンで採用されたボックス モデルで、通常は CSS プロパティ box-sizing: border-box; を使用してシミュレートされます。

ボックス モデルを制御する方法:

CSS では、いくつかのプロパティとテクニックを使用してボックス モデルの動作を制御できます:

box- Sizing 属性:

box-sizing 属性は、ボックス モデルの動作を制御するために使用され、content-box と border-box の 2 つの値を取ることができます。

content-box は、W3C 標準ボックス モデルを使用するデフォルト値です。これは、要素の幅と高さにコンテンツ領域が含まれ、パディング、境界線、およびマージンがコンテンツの外側に追加されることを指定します。エリア。

border-box は、IE ボックス モデルを使用します。これは、コンテンツ領域、パディング、ボーダーを含む要素の幅と高さを指定し、要素の外側にマージンが追加されます。

rree

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