CSSボックスのサイズ設定プロパティのしくみ

CSSのbox-sizingの使用方法を学ぶ ブラウザがHTML要素の幅と高さを計算およびレンダリングする方法を制御するプロパティ。

ボックスのサイズ設定（コンテンツボックスとボーダーボックス）

CSSのbox-sizing プロパティには2つの値があります：

• コンテンツボックス （デフォルト）
• border-box

ボックスサイズの値はどちらも、ブラウザがHTML要素のサイズを計算してレンダリングする方法に影響しますが、共通しているのはそれだけです。

content-box

デフォルトでは、すべてのHTML要素は content-boxを使用します 値：

box-sizing: content-box;

これは、次のスタイルの要素がある場合を意味します。

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
}

次に、その要素の幅と高さは、100pxではなく134pxとして計算されます。 CSSスタイルシートで指定したとおり。結果：

サイズを自分で確認したい場合は、ブラウザを有効にしてください Element Inspector このコマンドで：

• Mac：Cmd + Shift + C
• Windows：Ctrl + Shift + C

次に、上の要素の上にマウスを移動して、そのサイズを確認します。

これは、 content-boxが原因で発生します 幅/高さの値を境界線（ 1px ）と一緒に追加します 両側）とパディング（ 16px 両側）の値、およびそれらの値の合計で要素のサイズをレンダリングします：

• 要素の幅： 1 + 16 + 100 + 16 + 1 =134ピクセル。
• 要素の高さ： 1 + 16 + 100 + 16 + 1 =134ピクセル。

content-boxからのこのデフォルトの動作 作業するのは非常に面倒ですが、幸いなことに、変更するのは簡単です！

デフォルトのbox-sizing：content-box 宣言は、すべてのWebブラウザに組み込まれているユーザーエージェントスタイルシートから継承されます。

救助のためのボーダーボックス

content-boxは簡単に上書きできます border-boxの値 値。これは、ブラウザが要素のサイズを計算する方法とは逆の効果があります。

box-sizing: border-box;

box-sizingを設定する border-boxへのプロパティ ブラウザは、 heightを使用して要素に指定した正確な幅と高さで要素をレンダリングします。 およびwidth プロパティ：

div {
  width: 100px;
  height: 100px;
  padding: 16px;
  border: 1px solid;
  box-sizing: border-box; 
}

結果：

border-box 値はブラウザを含むにします 要素の合計の幅と高さを計算するときに、指定されたパディングと境界線の値を（追加しないで）。

border-boxを使用 、どのパディングに関係なく またはborder 要素に追加する値。要素の合計サイズは、 heightで指定した値になります。 およびwidth プロパティ。

目安として、並べて比較します。

上記の両方の要素の幅と高さは100ピクセルに指定されていますが、 border-box を使用しているため、2番目の要素のみがこれらの指定された値を尊重します。 。

content-box vs border-box 要約：

• コンテンツボックス パディングとボーダーの値を要素の高さ/幅の値と組み合わせて、合計をレンダリングします。
• border-box 要素の幅/高さの一部として、パディングと境界線の値が含まれます。

すべてにborder-boxを使用する

これで、 border-box CSSで指定した実際のサイズでブラウザにHTML要素をレンダリングさせます。しかし、どのように border-boxを適用しますか すべてのHTML要素に？

一番上に次のCSSルールセットを追加するのと同じくらい簡単です。 スタイルシートの：

*, *:before, *:after {
  box-sizing: border-box;
}

上記のコードは、CSSのユニバーサルセレクター *を使用しています border-boxを適用するには box-sizingの値 プロパティ：

• すべての通常の要素セレクター（ div 、 p 、ボタン など）
• すべての：before および：after 疑似セレクター