CSS3ボックスサイジング
CSS3のbox-sizingプロパティは、私たちは、要素の全体の幅と高さのパディングとボーダーを含めることができます。
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
数字は続い-webkit-または-moz-接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.1 -webkit- |
9.5 |
CSS3なしbox-sizingプロパティ
デフォルトでは、要素の幅と高さは次のように計算されます。
幅+パディング+ボーダー=エレメントの実際の幅
要素の高さ+パディング+ボーダー=実際の高さ
これは意味：あなたは要素の幅/高さを設定すると、要素が頻繁に（要素のボーダーとパディングは要素の指定された幅/高さに追加されるため）は、設定されている以上に大きい表示されます。
次の図は、2つのショー<div>同じ指定された幅と高さを持つ要素を：
2 <div>結果で異なるサイズの終わりまで上記の要素（DIV2ので、パディングが指定されています）：
例
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
} »それを自分で試してみてください 彼らはパディングとボーダーを引くために持っていたので、だから、長い時間のためのWeb開発者は、彼らが望んでいたよりも小さい幅の値を指定しました。
CSS3で、 box-sizingプロパティは、この問題を解決します。
CSS3とbox-sizingプロパティ
CSS3のbox-sizingプロパティは、私たちは、要素の全体の幅と高さのパディングとボーダーを含めることができます。
あなたが設定した場合はbox-sizing: border-box;要素のパディングとボーダーの幅と高さに含まれています：
ここで、上記と同じ例であるbox-sizing: border-box;の両方に追加<div>要素：
例
.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％;）。
すべての要素にこれを適用すると、安全かつ賢明です：