CSSディメンション・プロパティ
CSSディメンションプロパティは、要素の高さと幅を制御することができます。
この要素は、100％の幅を有します。
設定高さと幅
heightおよびwidthプロパティは、要素の高さと幅を設定するために使用されています。
heightとwidth （これがデフォルトであるブラウザは高さと幅を計算することを意味します）、または長さの値で指定され、同様にautoに設定することができますpx, cm 、等、またはパーセント(%)を含有するブロックの。
注意： heightとwidthのプロパティは、パディング、ボーダー、または余白は含まれません。 彼らは、要素の高さ/パディング、ボーダーの内側の領域の幅、およびマージンを設定しました！
次の例は、 <div> 100ピクセルの高さと500ピクセルの幅を持つ要素を：
最大幅を設定します
max-width特性は、要素の最大幅を設定するために使用されます。
max-widthのような、 長さの値で指定することができますpx, cm 、等、またはパーセントで(%)を含有するブロックの、またはnoneに設定します（これがデフォルトです。何の最大幅が存在しないことを意味します）。
問題<div>ブラウザウィンドウが要素（500pxなど）の幅よりも小さい場合に、上記が発生します。 ブラウザはそのページに水平スクロールバーを追加します。
使用max-width代わりに、このような状況では、小さな窓のブラウザの処理を改善します。
ヒント：2 div要素の違いを見るために、広いよりも小さい500pxなどにブラウザのウィンドウをドラッグします！
注：の値max-widthプロパティのオーバーライドのwidth 。
次の例は、 <div> 100ピクセルの高さと500ピクセルの最大幅を持つ要素を：
それを自分で試してみてください - 例
要素の高さと幅を設定します
この例では、異なる要素の高さと幅を設定する方法を示します。
パーセントを使用して、イメージの高さと幅を設定します。
この例では、パーセント値を使用して、イメージの高さと幅を設定する方法を示します。
MIN-幅と要素の最大幅を設定し
この例では、最小幅とピクセル値を使用して、要素の最大幅を設定する方法を示します。
セット分の高さとエレメントの最大の高さ
この例では、最小の高画素値を使用して、要素の高さの上限を設定する方法を示します。
練習で自分自身をテスト！
すべてのCSS寸法のプロパティ
| プロパティ | 説明 |
|---|---|
| height | 要素の高さを設定します。 |
| max-height | エレメントの最大の高さを設定します。 |
| max-width | 要素の幅の上限を設定します。 |
| min-height | エレメントの最小の高さを設定します。 |
| min-width | エレメントの最小の幅を設定します。 |
| width | 要素の幅を設定します。 |