CSSボックスモデルの意味と原則を深く理解する

多くのフロントエンド開発者は、CSS は単純すぎるため、学習にそれほど長い時間を費やす必要はないと考えています。実際には、フロントエンド開発者が CSS を使いこなせば、効率とユーザー エクスペリエンスが向上します。最近は、CSS を徹底的に学習して、問題が発生したときに何をすべきかを理解し、適切な解決策をすぐに処方できるようにするつもりです。次にCSSボックスモデルを中心に紹介します。

ボックスモデルとは

ボックスモデルと言えば、フロントエンド開発者であれば誰もが理解していると思います。 mdn 公式ウェブサイトの説明がここに適用されます:

ドキュメントでは、各要素は長方形のボックスとして表されます。これらのボックスの寸法、プロパティ (色、背景、境界線など)、および位置を決定することが、レンダリング エンジンの目標です。

CSS では、これらの長方形のボックスはそれぞれ、標準のボックス モデルを使用して記述されます。このモデルは、要素が占める空間の内容を記述します。各ボックスには、マージン、ボーダー、パディング、コンテンツの 4 つの辺があります。

公用語は常に非常に曖昧なので、Chrome コンソールのスクリーンショットを撮って説明しましょう:

一番外側のオレンジ色は余白領域、内側の黄色は境界領域 (境界領域) です。さらに内側の緑はパディング領域、最も内側の緑はコンテンツ領域です。

ボックスモデルの役割

さて、ボックスモデルのコンセプトについては上の写真だけで言うことはないようです。レイアウトに対するボックス モデルの影響を見てみましょう。たとえば、要素のサイズを 200px に設定したい場合、次のコードを記述するとします。

<style>
  .box {
    width: 200px;
    height: 100px;
    padding: 20px;
  }
</style>
<div class="box">
  盒子模型
</div>

その結果、要素を検査すると、要素のサイズが 240px ではなく 240px になっていることがわかります。 200ピクセル。

これはなぜですか?デフォルトでは、幅、高さなどの設定はコンテンツ領域に対するものであるため、設定された幅 200px は、コンテンツ領域の幅に左右のパディングのサイズを加えたもののみとなり、全体のサイズが決まります。大きくなる要素。これは、現実世界の中央のボックスについての私たちの理解とは異なります。たとえば、家の面積について話すとき、それは利用可能な面積を指すだけでなく、壁の厚さ、バルコニー、エレベーター、その他のスペースも含まれます。

ボックスモデルとボックスサイジング

CSSを現実世界と一致させるために、この時点でボックスサイジングが機能します。ボックス サイズ設定は、エフェクト オブジェクトの幅と高さを設定するために使用されます。 content-box、pading-box、border-box という 3 つの値があります。デフォルト値は content-box です。なぜマージンボックスがないのかと疑問に思う人もいるかもしれません。具体的な理由はわかりません。著書「CSS World」の中で Zhang Xinxu 先生が述べた 2 つの理由を参照してください:

margin-box 自体にはあまり価値がない

、そして margin の仕様が競合します。マージンの仕様に「マージンの背景は常に透明」とあるので、マージンボックスがある場合、背景はどうなるでしょうか？

なぜ余白ボックスがないのかについては、簡単に説明しますので、興味のある方はご自身で確認してください。

ベストプラクティス

一部の専門家は、レイアウトの便宜のために、すべての要素をボックスサイズに設定することを提案しています: border-box

低バージョンのブラウザを考慮しない場合は、次のコードを使用できます:

*,
*:before,
*:after { 
  box-sizing: border-box;
}

その後、一部の専門家が次のような継承方法を提案しました。

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

この方法はベストプラクティスと呼ばれています。専門家によって推奨されているため、将来は 2 番目の方法を使用できます。メソッドのコード スニペットは、reset.css に配置されます。

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