CSS

Last-modified: 2010-11-14 (日) 21:10:42

9.2.1

 block box の中には、block boxだけが入っているか、inline boxだけが入っているかのどちらかであるとする。
 あるblock boxの直下にblock boxと、何のタグにも囲まれていないテキストがが混在する場合は、そのテキストを含むような仮想のblock box (anonymous block box)が存在するものとする。
 あるblock boxの中にinline boxがあって、かつ、何のタグにも囲まれていないテキストがある場合は、そのテキストを含むような仮想のinline box (anonymous inline boxと呼ぶ)があるものとする。
 inline boxがblock boxを含む場合、inline boxはblock boxの前後で分割され、分割されたinline boxはそれぞれanonymous block boxで囲まれているものと考える。結果として、以下の3つのblock boxが並ぶことになる。
 ・前半のinline boxを囲んでいるanonymous block box
 ・block box (inline boxに含まれていたもの)
 ・後半のinline boxを囲んでいるanonymous block box

containing block

 9.1.2
   あるボックスについて、その位置・サイズの計算の基準として使うボックス。
   一般に、そのボックスを含んでいる外側のボックスがcontaining blockになる。
 10.1
   あるelementのcontaining blockは、以下のとおり定義される。
   (elementが作るblockではなく、elementの位置・サイズ計算の基準に使うblock)
   1. root elementの場合
      initial containing blockがcontaining blockになる。
      initial containing blockは、サイズはviewport(=ウィンドウ)と同じで、位置はcanvas(ドキュメント)の原点と同じ。
   2. それ以外で、positionがrelativeかstaticの場合
      祖先のblock box(*1)のうち、直近のもの。
      (*1)正確には、block-level, table cell, inline-blockのbox
   3. position: fixed の場合
      viewport(=ウィンドウ)がcontaining block
   4. position: absolute の場合
      4-1. 祖先にpostionがabsolute, relative, fixedのいずれかのものがある場合、その直近のものについて、
      4-1-1. その祖先がinline-levelなら (*2)
         containing blockの左辺と上辺は、その祖先によって作られる最初のboxのpadding edge (borderを含まないborderの内側の領域)の左辺と上辺
         containing blockの右辺と下辺は、その祖先によって作られる最後のboxのpadding edgeの右辺と下辺(*3)
      4-1-2. そうでないなら
         その祖先のpadding edge (borderを含まないborderの内側の領域)
      4-2. そのような祖先がない場合
        initial containing block がcontaining blockになる。(1.参照)
    (*2) 正確にはdirectionがltrの場合。rtlの場合は左右逆にして考える。
    (*3)     この定義では、containing blockの幅が負数になる(右辺のほうが左辺より左にくる)ことがある。「その祖先」がinline-levelなので、複数行にまたがって表示されることがあり、また、inline-levelによって作成されるboxは少なくとも行ごとに分割されている。また、直前の表示内容に続いて表示されることがあるのでinline-levelの要素は行の後ろ(右)のほうから表示が開始される場合がある。そうすると、「最初のbox」(最初の行のbox)より、「最後のbox」(最後の行のbox)のほうが左に来ることになる。この場合に

======================
floatに注目 positionは指定していない(=static)とする。

containing block

      祖先のblock box(*1)のうち、直近のもの。
      (*1)正確には、block-level, table cell, inline-blockのbox

幅と左右のマージン

 margin-left, margin-right
   指定がautoなら実際は0になる。
 width
   指定がautoなら、shrink-to-fit な幅になる。
     推奨幅 (明示的な改行指定を除いて)改行なしでフォーマットした場合の幅
     最小幅 極力改行した場合の幅
     利用可能な幅 containing blockから左右のmargin, border, paddingとスクロールバーを除いた幅
     shrink-to-fitな幅
        最小幅  > 利用可能幅  ⇒ 最小幅
        推奨幅 > 利用可能幅 > 最小幅  ⇒ 利用可能幅
        利用可能幅 > 推奨幅    ⇒ 推奨幅
 margin-top, margin-bottom
   auto⇒0
 height
   autoなら・・・
     inline-levelの子のみの場合
     block-levelの子の場合(子がfloatの場合も含む)
      一番上の子供のmargin領域の上辺から、
      一番下の子供のmargin領域の下辺までの距離
     ただし、absolute位置指定の子供は無視。(その子供の子(つまり孫)がabsoluteでなかったとしても、無視)
     relative指定の子供はoffsetを加算する前の位置で計算。

=========================