CSSボックスのサイズ変更プロパティの正しい使用法

CSSのカスタム属性（変数）

CSSボックスのサイズ変更プロパティは、私たちは塗りつぶしと境界線幅と総要素の高さを含めることができます。

いいえCSSボックスのサイズ変更プロパティません

次のようにデフォルトでは、要素の幅と高さが計算されます：あなたは要素の幅/高さを設定すると、要素は一般的になります幅パディング+ボーダー=素子高さ+パディング+枠線の実際の幅+は=これは、要素の実際の高さがあることを意味します（ボーダーとパディング要素は幅/高さを指定した要素に追加されているので）あなたが設定比率。次の図は、2つの<div>要素を指定したのと同じ幅と高さを持って示しています。

<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>ccs</title> <style> .div1 { width: 300px; height: 100px; border: 1px solid blue; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; } </style> </head> <body> <div class="div1">这个div更小(宽度为300px，高度为100px)。</div> <br> <div class="div2">这个div更大(宽度也是300px，高度也是100px)。</div> </body> </html>

この問題を解決するためのボックスのサイズ変更プロパティ。

CSSボックスのサイズ変更プロパティを使用します

ボックスのサイズ変更プロパティは、私たちは塗りつぶしと境界線幅と総要素の高さを含めることができます。もし、箱サイズ：ボーダー・ボックス、ボーダーの幅と高さに含まれる要素の上に充填して配置されました：

.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; }

オンライン体験

、そのボックスのサイズ変更の結果の使用：ボーダー・ボックス、非常に良い、多くの開発者は、このように作業しているページ上のすべての要素をしたいです。サイズへの調整のすべての要素が、より直感的な方法ということを確実にするために、次のコード。（すべてではない - これは、入力中のテキストエリアで、別の理由を見て幅：100％;）多くで使用される要素を形成し;ボーダーボックス：多くのブラウザは、箱サイズを持っています。それが安全かつ賢明であるすべての要素にそれを適用します。

* {
  box-sizing: border-box; }

CSSボックスのプロパティのサイズ変更

ボックスサイズは、要素の幅と高さを計算する方法を定義します。パディングとボーダーを含めるべきかどうか