今回のCSS

要素の幅を指定する

横幅の指定をしてみます

幅250pxの指定です。

幅100%の指定です。

幅autoの指定です。

.testClass
{
  width:XXpx;
  width:XX%;
  width:auto;// 初期値
}

指定方法は　【ピクセル指定】【パーセント指定】【auto】の３種類となり
autoは初期値であり、状況に応じて大きさが設定されます。
パーセントやautoの指定は親要素の大きさを参照します。

100%とautoって一緒なんじゃないのか？

実はなんだか微妙に違うようなのです。

すごく微妙な所なのですが、親要素にborderを引いていますが
width:100%の場合は【borderを含む】
width:autoの場合は【borderを含まない】
となっています。凄く微妙なのですがこんなところに差が出てるのですね！

話はまだ終わっちゃいませんよ

良い感じにズレまくってますね！
子要素にpaddingを指定してみました。
100%指定は、分かりやすく言うと、親要素の幅+paddingで表示しています。
かたやautoのほうは、padding値はそのまま、幅は親要素を超えないように調整してくれています。
またこのpaddingの話はピクセル指定を行った場合でも同じ現象が起きます。
正しく幅を指定する場合は、【親要素-padding値(左右)-border値(左右)】の結果の数値を指定する必要があります。
つまり、autoは上記計算を勝手にやってくれることになります。偉い

ﾋｪｯ!?ｹｲｻﾝｽﾙﾝﾃﾞｽｶｧ?んんｗｗｗ違いますｗｗｗ

一応書いとかないとね。
結論から述べると、padding borderのサイズをいちいち計算する必要はありません。
CSS3から出てきたbox-sizing:border-boxをつけましょう。
ここではこいつの説明は省きます。

高さを指定してみませんか？

続きまして高さの指定をしてみましょう。
paddingとかborderの数値によってはみ出したりするのはwidthと同じなので端折ります。

.testClass
{
  width:XXpx;
  width:XX%;
  width:auto;// 初期値
}