box-sizing は、width と height プロパティが実際に何を測定するかを制御します。デフォルト値 (content-box) はコンテンツのみを測定します。border-box はパディングとボーダーを含めます。
なぜ重要なのか
css
{
: content-box;
: ;
: ;
: solid;
}
content-box では、パディングとボーダーは width の上に加算されるため、要素は設定した数値より広くなります。これはレイアウトを破壊します。パディング付きの width: 50% ボックスは 50% をはみ出します。
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Rendered width = 200px TOTAL. Content shrinks to 150px to make room. */
border-box では、width は最終的なレンダリング幅です。パディングとボーダーは内側から差し引かれます。設定した数値がそのまま得られるサイズになり、非常に直感的です。
*, *::before, *::after {
box-sizing: border-box;
}
ほぼすべての現代的なスタイルシート、フレームワーク、リセットはこれをグローバルに適用します。サイズ指定が予測可能になります。width: 50% + パディングは正確に 50% の幅のままで、2 つの width: 50% ボックスは側並びで、はみ出すことなく配置されます。
border-box は、レイアウト計算で最も一般的な問題の原因を排除します。すべての幅にパディングとボーダーを心理的に加算する必要がなくなります。
グローバルに設定することはベストプラクティスのデフォルトと見なされています。なぜなら「設定した幅が得られる幅」は、自然にサイズ指定が機能すると期待する方法だからです。