CSSボックスモデルは、すべての要素がコンテンツ、パディング、境界線、マージンの4つのコンポーネントを備えたボックスとして扱われるため、Webページレイアウトを制御するために不可欠です。 1.コンテンツ領(lǐng)域にはテキストまたは畫像があります。 2。パディングは、コンテンツとボーダーの間に內(nèi)部スペースを追加します。 3。パディングとコンテンツの周りにボーダーラップ。 4。マージンは、外部空間を分離する要素を作成します。デフォルトでは、幅はコンテンツ領(lǐng)域にのみ適用されますが、ボックスサイズ：ボーダーボックスを使用します。幅のパディングと境界線が含まれています。マージンとパディングを適切に使用すると、マージン分離要素とパディングが內(nèi)部スペースを追加し、垂直マージンの崩壊とレイアウトメソッドの相互作用に留意します。

CSSボックスモデルは、Webデザインのレイアウトの基礎(chǔ)です。ウェブページ上のすべての要素は、本質(zhì)的にボックスです。これらのボックスがどのように動作するかを理解することで、間隔、アラインメント、サイジングをより効果的に制御できます。 CSSが初めての場合、またはレイアウトスキルを微調(diào)整しようとしている場合は、ボックスモデルに頭を包むことが不可欠です。

ボックスモデルを構(gòu)成するものは何ですか？

その中心では、CSSボックスモデルは、コンテンツ、パディング、境界線、マージンの4つの部分で構(gòu)成されています。実際のコンテンツの周りにタマネギのように階層化されています。

• コンテンツは、テキスト、畫像、または他のメディアがライブする場所です。
• パディングは、コンテンツとボーダーの間に要素內(nèi)のスペースを追加します。
• ボーダーはパディングとコンテンツを包みます。
• マージンは、要素の外側(cè)のスペースを作成し、他の要素から分離します。

したがって、要素の幅を設(shè)定するときは、 width: 200px; 、それはデフォルトでのみコンテンツ領(lǐng)域に適用されます。パディング、境界線、またはマージンを追加すると、ボックスサイズの動作を変更しない限り、目に見える幅の合計幅は200pxを超えます（後で詳しく説明します）。

box-sizingでサイジングを制御する方法

デフォルトでは、ちょうど見たように、幅を設(shè)定するにはコンテンツ領(lǐng)域のみが含まれます。パディングや境界線が意図したものよりも大きくなるため、予期しないレイアウトの問題につながる可能性があります。

これはbox-sizing役立つ場所です。主なオプションが2つあります。

• box-sizing: content-box; （デフォルト） - 幅と高さはコンテンツ領(lǐng)域にのみ適用されます。
• box-sizing: border-box; - 幅と高さには、パディングと境界線が含まれており、レイアウト計畫を容易にします。

一般的な慣行は、すべての要素が一貫して動作するように、 border-boxグローバルに適用することです。

 * {
  ボックスサイズ：ボーダーボックス;
}

このルールを使用すると、 width: 200px; 、パディングや境界線は200pxを超える幅を押し出さないため、ビルディングレイアウトはよりスムーズになります。

マージンとパディングを効果的に使用します

間隔を正しく取得することは、CSSの最も難しい部分の1つであり、最も重要な部分の1つでもあります。つまずくことなくマージンとパディングの使用方法は次のとおりです。

• パディングを使用して、要素內(nèi)にスペースを作成します。これは、ボタンまたはカード內(nèi)のテキストの周りに呼吸室を追加するのに役立ちます。
• マージンを使用して要素を互いに分離します。段落、カード、またはセクションの間隔を空けてください。

注意すべきことの1つは、垂直マージンが崩壊する可能性があります。つまり、2つの要素が垂直に積み重ねられている場合、上部と下のマージンの両方がある場合、マージンは合計する代わりに単一のマージンに融合する可能性があります。この動作は正常ですが、時には混亂することもあります。

ここにいくつかの簡単なヒントがあります：

• ブロックレベルの要素を水平に中央に配置するには、 margin: 0 auto; 。
• パーセンテージベースのパディングと固定幅のコンテンツを混合しないでください。亂雑になる可能性があります。
• FlexBoxまたはグリッドを使用する場合、これらのレイアウト方法はマージンとパディングの仕組みに影響を與える可能性があるため、テストするようにテストします。

それがCSSボックスモデルの基本です。派手ではなく、絶対に不可欠です。各部品がどのように相互作用するかを理解したら、一貫したレイアウトを構(gòu)築するのがはるかに簡単になります。

以上がCSSボックスモデルのチュートリアルとは何ですか？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。