CSSレイアウト[TIPS]
CSSのボックス構造について
CSSはHTMLの各構成要素（div、p、hx、img、a、ul、li など）に対して指定する。各要素は、高さと幅のある四角いボックスになる。
※spanだけはインライン要素なのでボックスにならない。
ボックスは右図のような部分から構成される。
この各部の色や幅などをCSSで指定する。
※背景色や背景画像はpaddingには付くが、marginには付かない。
DOCTYPE宣言による表示の違い
モダンブラウザ（IE7以降、FireFox、Opera、Safari）では、「DOCTYPE宣言」で表示モードが「互換モード」と「標準準拠モード」に切り替わる。
「互換モード」はオールドブラウザのCSSの解釈、「標準準拠モード」はモダンブラウザの解釈になる。
注意点は「padding」と「border」の認識が、表示モードによって異なる事。
下記のCSS指定で作ったボックスは、図のように、互換モードと標準準拠モードでは表示が違う。
#contents{width: 120px;
padding: 10px
border: 2px solid #CCC
}
互換モード
では「width」で指定した値の「内側」にpaddingやborderを作る。
標準準拠モードでは「width」で指定した値の「外側」にpaddingやborderを作る。
同じDOCTYPE宣言で、ブラウザにより表示モードが異なる場合があり、レイアウトが崩れる要因となる。
回避策は、
→どのモダンブラウザでも標準モードで表示させるDOCTYPE宣言をすること。
「DOCTYPE宣言」についてを参照。
そして、オールドブラウザのために、下記のような回避策が考えられる。
→コンテンツの外枠のサイズを決めたら、ボタンなど必要な物以外には、やたらとサイズ指定しない。
→サイズ指定をするとき、padding指定をしない（中にmarginをとったボックスを入れ子にする）。
→最後の手段は「CSSハック」を使って、特定のブラウザに別のCSS指定を与える。