CSS box-sizing属性の正しい使い方

CSSカスタム属性（変数）

CSS box-sizingプロパティを使用すると、要素の幅と高さの合計に塗りつぶしと枠線を含めることができます.

CSS box-sizing属性がありません

デフォルトでは、要素の幅と高さは、width+padding+border=要素の実際の幅height+padding+border=要素の実際の高さとして計算されます.これは、要素の幅/高さを設定すると、要素は通常、要素の枠線と塗りつぶしが要素に追加された指定の幅/高さよりも大きく見えます.次の図は、同じ幅と高さを持つ2つの要素を示しています.
 
 
 

> > charset="utf-8"> > > > > 
class="div1">  div  (   300px，   100px)。
> 
> 
class="div2">  div  (    300px，    100px)。
> > > 

box-sizingプロパティはこの問題を解決した.

CSS box-sizingプロパティの使用

box-sizingプロパティを使用すると、要素の幅と高さの合計に塗りつぶしと枠線を含めることができます.box-sizing:border-box;エレメントの塗りつぶしを設定し、枠線を幅と高さに含めます.

.div1 {
  width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } 

オンライン体験
その結果box-sizing:border-box;多くの開発者は、ページ上のすべての要素がこのように動作することを望んでいます.次のコードは、すべての要素のサイズをより直感的に調整することを保証します.多くのブラウザはbox-sizing:border-box;多くのフォーム要素に使用されます(ただし、すべてではありません.これは、入力とテキスト領域が幅で異なるように見える理由です:100%).すべての要素に適用するのは安全で賢明です.

* {
  box-sizing: border-box; } 

CSS Boxサイズ調整属性

box-sizingは、要素の幅と高さを計算する方法を定義します.塗りつぶしと枠線を含めるべきかどうか