ボックスモデル

Webページ内の各要素はボックスでラップされます.これらのボックスの配置は、ウェブサイトのレイアウトを構成します.レイアウトを設計することは、箱モデルを理解することが不可欠であるフロントエンド開発の重要な部分です.
ボックスの特徴:
各ボックスには、パッド、マージンとボーダーがあります.
パディング:コンテンツとボーダーの間のスペース.
マージン:箱の周りのスペース.
border :箱の寸法を示す.
https://commons.wikimedia.org/wiki/File:Box-モデルSVG
箱の寸法
ボックスの寸法は次のように計算されます.
ボックスの幅=要素の幅+パディング右+左+ボーダーの右側に+パッドを左詰め
ボックスの高さ=要素の高さ+パディングトップ+パディングボトム+ボーダートップ幅+ボーダーボトム幅
次のcssを見てみましょう.

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid red;
  margin: 10px;
}

ボックスの幅=要素の幅(100 px)+パディング左(10 px)+パディング右(10 px)+ボーダー左
ボックスの高さ=要素の高さ(100 px)+パッドトップ(10 px)+パディングボトム(10 px)+ボーダートップ
したがって、箱の寸法は130 px x 130 pxである.

要素が100 px x 100 pxである間、パディングとボーダーは幅と高さの両方に30 pxを加えました.これは、我々の要素をオーバーフローさせることができますし、スペースのためにお互いに競争し、レイアウトを台無しにする.
ボックスサイジング
この解決策は、ボックスサイジングと呼ばれるCSSプロパティです.ボックスサイズのデフォルト値はコンテントボックスに設定されます.
コンテンツボックス:幅と高さだけの要素が含まれます.パディングとボーダーは含まれません.
したがって、パディングおよび境界は要素に余分な画素を加える.そして、このようにボックスの全体的な寸法を増やす.
代替オプションはボーダーボックスです.
ボーダーボックス:パディングとボーダーが含まれています.パディングと境界線が変更されると、それに応じて要素の寸法が調整され、ボックスの寸法を固定する.
ボックスの幅と高さがパディングとボーダーに依存しない要素の寸法に固定されるようにボックスのサイズをボックスに設定します.

前の例にボーダーボックスを適用しましょう.

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 5px solid red;
  margin: 10px;
  box-sizing: border-box
}

ボックスの寸法はパディングとボーダーを加えた後でも100 px x 100 pxのままであることに注意してください.これはパディングとボーダーに対応するために要素の寸法を調整することによって達成される.
チップ
ボックスのサイズをユニバーサルボックス(*)を使用してボーダーボックスに設定し、スタイルシートの先頭にあるすべての要素の既定のボックスサイズのプロパティをリセットします.

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

この記事がBOXモデルのあなたの理解を助けたならば、コメントで知らせてください!