さまざまなモードでのボックスの幅と高さの判定

私はかつてこのような問題に遭遇しました。div にパディングを設定すると、div 全体の幅と高さが変更されることがわかりました。これにより、ボックス全体の幅と高さを決定する方法がわかりました。判断はどうですか？

問い合わせの結果、ボックスの幅と高さを決定するには、標準モードと変なモードの2つのモードがあることが分かりました。

よりよく理解するために、まず div を設定してスタイルを設定しましょう:

通常の状況では、ボックスの幅と高さは、コンテンツの幅と高さ + 境界線の幅と高さ + 内側のマージンの幅と高さ + 外側のマージンの幅と高さ

これは標準モードでのボックスの幅と高さの決定です

しかし、ある時点で (IE6、7、8 では DOCTYPE が欠落しています)、ボックスの幅と高さは、設定された幅と高さ + マージンの幅と高さに等しくなります。ここで設定された幅と高さは、コンテンツの幅と高さ + 内側の余白 幅と高さ + ボーダーの幅と高さ

これは奇妙なモードでのボックスの幅と高さの決定です

box-sizing 属性を使用して、どのモードを使用するかを決定できます

content-box: 標準モード解析計算、

ボーダーボックス: 奇妙なモード分析計算を使用します。