認識ボックスモデル

ボックスモデルは、各要素が占有するスペースの大きさを表します.4つの領域からなり、それぞれコンテンツ領域、内マージン領域、枠線領域、外マージン領域である.これらの領域はそれぞれ5つの属性に対応しています.

widthおよびheight、幅および高さ

padding内マージン

borderボーダー

margin外距離

コードのデモ:

div{
  border:1px solid red;
  height:200px;
  width: 200px;
  padding: 40px;
}

効果図:widthとheightは200pxと指定されていますが、実際にはその幅は282px * 282pxです.
これは、ボックスモデルがcontent-boxであり、その幅が実際のコンテンツの幅であるためである.内側の余白と枠線を大きくすると、コンテンツ領域のサイズには影響しませんが、要素の合計サイズが増加します.content-boxを使用してスタイルを書く場合、人間の理解に合わず、box-sizingを設定することでボックスモデルを変更するのが一般的です.border-boxを使用すると、その幅の高さは要素のサイズであり、コンテンツ領域の幅の高さ+内側の余白+枠線でもあります.borderまたはpaddingのサイズを変更すると、コンテンツ領域のサイズに影響します.
コードのデモ:

div {
  box-sizing: border-box;
  border:1px solid red;
  height: 200px;
  width: 400px;
  padding: 40px;
}

効果図:
この効果図から、要素の総幅は400px * 200pxであり、その内容領域は318pxであることがわかる.コンテンツ領域+内側の余白+枠線は400pxです.border-boxを用いた人間理解について述べた.
これは、実際の開発では、要素が実際に占有されている幅が変わらないことを保証するには、widthを書くときにpaddingを減らし、paddingを書くときにwidthを減らしなければならないからです.要素の実際の大きさを変えるのは往々にして災難的であるからだ.