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

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

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

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

リーリー

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

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

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

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

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

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

を使用します

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

奇妙なモードを通じて、全体の幅と高さを変更せずにボックスにパディングを設定できます。