昨日に引き続き、
CSS とはなんだろうか を読んだ。
displayやpositionといった視覚フォーマットモデルに関する部分は、文章を読むだけでは理解しづらい。
サンプルを例示している以下のサイトが役に立った。
スタイルシート（CSS）｜PHP & JavaScript Room今日は max-width/min-width/max-height/min-height でハマった。
widthやheightの値がこの範囲で変化するのだが、「何によって変化するのか？」がわからなかった。
そこで次のようなテストページを作ってwidth/height関連の値を変化させて実験してみた。
(前略)
<style TYPE="text/css">
<!--
.parent { max-width: 500px; min-width: 200px; max-height: 30em; min-height: 20em; background-color: green;}
.child { width: 300px; height: 40em; background-color: yellow;}
-->
</style></head>
<body>
<div class="parent"><div class="child"></div></div>
</body></html>
結果は次のようになった。
＜注意＞Firefox3.6.7での結果です。他のブラウザでは異なる結果になるかもしれません。以下は、親要素が<body>の要素についてです。
・要素のwidth
ウインドウの大きさによって変わる。子要素のwidthには無関係。
ウインドウの大きさに合わせて、min-width から max-width まで変化する。
ウインドウを大きくするにつれて大きくなり、最大max-widthまで大きくなる。
ウインドウを小さくするにつれて小さくなり、最小min-widthまで小さくなる。（それよりもウインドウが小さくなると横スクロールバーが表示される）
子要素のwidth > 親要素のwidth の場合、子要素がどう表示されるかは親要素のoverflowに従う。
・要素のheight
子要素のheightによって変わる。ウインドウの大きさには無関係。
子要素のheight < min-height の場合、要素のheightは min-height になる。
max-height > 子要素のheight > min-height の場合、要素のheightは子要素のheightになる。
子要素のheight > max-height の場合、要素のheightは max-height になる。
子要素のheight > max-height の場合、子要素がどう表示されるかは親要素のoverflowに従う。
widthとheightの動作がこのようにまるっきり違うことは、HTMLにちょっと詳しい人には常識なんだろうな。
そんなわけで、今日は3時間かけて 2-4.視覚効果 までしか読めませんでした。
