ボックス系のプロパティとして、「マージン」「ボーダー」「パディング」が存在します。 この他にも幅や高さなどのプロパティを「その他」としてまとめました。 ボックス系の詳細の説明は、「整形モデル」に記してありますので参照して下さい。
DIV{
text-align : center; /*テキスト位置を中央*/
background-color : yellow; /*背景色を黄色*/
width : 50%; /*親要素の幅に対して50%の幅を指定*/
}
画像などの置換要素に用いることが最も有用です。 例えば、IMG要素のWidth属性と同じ働きをします。 指定した幅で画像は表示されますので、元々小さな画像を横に引き延ばして仕切り線のように使うことも可能です。 ただし割合指定の場合、画像そのものの幅に対するものではなく、親要素の幅に対するものであることに注意して下さい。
テキストなどにも指定可能です。（ただし、ブロックレベル要素のみ） 負の値はとれません。
DIV{
text-align : center; /*テキスト位置を中央*/
background-color : yellow; /*背景色を黄色*/
height : 50%; /*親要素の幅に対して50%の高さを指定*/
}
画像などの置換要素に用いることが最も有用です。 例えば、IMG要素のHeight属性と同じ働きをします。 指定した高さで画像は表示されますので、元々小さな画像を縦に引き延ばすことも可能です。
テキストなどにも指定可能です。（ただし、ブロックレベル要素のみで、ブラウザが対応していない可能性があります） 負の値はとれません。
CSS1では、<percentage> の値は仕様書にはありませんが、 CSS2ではサポートされているので追記しました。
CSS1コア：置換要素以外に対しては必ず「auto」として扱って良いことになっています。
IMG{
float : right; /*右側に画像を表示し、左側にテキストを回り込ませる*/
}
画像などの周りにテキストを回り込ませるプロパティです。 「left」「right」でそれぞれテキストを右、左に回り込ませます。 この時指定した要素は、浮動要素として扱われ、「display」プロパティはその指定を無視され、 必ず「block」として扱われます。
回り込みの終了は「clear」プロパティで行います。
「none」を指定すれば通常通りの表示となります。また、テキストなどにも使用可能です。
P{
clear : none; /*浮動要素に回り込みを許可する*/
}
H1{
clear : both; /*表題なので浮動要素に回り込みを禁止する*/
}
当プロパティを指定した要素の両側に浮動要素（回り込み）の存在を許可するかどうかを指定します。 つまり、許可しなければこの要素で回り込みが終了することになります。 完全に終了させたい場合は「both」を選ぶと良いでしょう。 どちらかだけ禁止したい場合は、「left」や「right」を指定します。