CSS 2仕様読解:ビジュアルフォーマットモデルVisual formatting model

9.1ビジュアルフォーマットモデルの概要
ビジュアルフォーマットモデル(Visual formatting model)は何をしていますか?定義User Agent文書ツリーを視覚媒体上でどのように処理するか.
how user agents process the document tree for visual media.

User Agent:パソコンや携帯電話のブラウザ:IE、Chrome、Firefox、UCなどと理解できるのが一般的です.

ビジュアルメディア:ディスプレイ、プリンタなどのビジュアル出力デバイスと理解できます.

ドキュメントツリー:HTML(またはXML)ドキュメントとして理解でき、ツリー構造組織の要素のセットです.

ビジュアルフォーマットモデルでは、ドキュメントツリー(document tree)の各要素がボックスモデル(box model)の定義に従って0個以上のボックスを生成します.これらのケースのレイアウトは、以下の点で決まります.-ケースの外形寸法(dimension)とタイプ(type).ポジショニングスキーム(positioning scheme)-ドキュメントツリー(document tree)の要素間の関係-その他の外部情報(ビューポートviewportサイズ、画像自体のサイズなど)
仕様で本章で定義した各種属性は、連続媒体(continuous media)とページング媒体(paged media)の両方に適用される.ただし,エッジ属性(margin)がページングメディアに適用されると表現が異なる.
ビジュアルフォーマットモデル仕様も、文字間隔アルゴリズムがここで定義されていないなど、フォーマットのすべての態様を定義しているわけではありません.これらの仕様が明確に定義されていない点については,ブラウザ(user agent)によって異なる表現がある.
9.1.1Viewportビューポート
連続メディアでは、User Agent通常、ユーザに1つのウィンドウを提供するか、画面上の可視領域がドキュメントを表示するために使用される(一般的にはウェブページと理解される)、このウィンドウまたは可視領域がビューポートViewportである.ビューポートのサイズが変更された場合(ユーザーがウィンドウの縁をドラッグして大きくしたり、ウィンドウを縮小したりするなど)、User Agentドキュメントを再レイアウトします.
9.1.2Containing blockブロックを含む
CSS2.1では、箱の位置と属性は、Containing blockブロックを含む矩形の箱を参照して算出される.一般的に、元素が生成した箱はその子孫元素の箱として機能するContaining blockブロックを含む.箱はその子孫の箱のためにブロックを構築したと言える.
用語 意味は ではなく .The phrase a box's containing block means the containing block in which the box lives , not the one it generates.
各ケースはその含むブロックを参照して1つの位置が与えられるが、これはこのケースが表示上必ずその含むブロックに含まれるというわけではなく、1つのケースが可能である (overflow)その含むブロックである.
論理構造組織の前のボックスは、常にその含むブロックに含まれており、前のボックスがその含むブロックの表示領域をオーバーフローする可能性があることを示します.
1つの箱のブロックを含む寸法計算の詳細は、ここを参照してください.
9.2制御ボックスの生成Controlling box generation9.2章ではCSS 2について説明する.1生成できる箱のタイプ(type of boxes).ボックスのタイプは、ビジュアルフォーマットモデルでの動作表現に影響します.以下に示すdisplay属性は、ボックスタイプを指定するために使用されます.
9.2.1ブロックレベル要素とブロックボックスBlock-level elements and block boxesブロックレベル要素(block-level element)は、ソースドキュメントにボックスとしてフォーマット表示される要素、例えば段落である.1つのエレメントのdisplay属性をblock、list-item、またはtableに設定することで、このエレメントをブロックボックスにすることができます(block-level box).
ブロックボックスは、ブロックレベルフォーマットコンテキスト(block formatting context、略称BFC)に参加します.各ブロックレベル要素は、その子孫ボックスと生成された内容を含むための基本的なブロックレベルボックスを生成し、この基本的なブロックレベルボックスは、位置決めスキーム(positioning scheme)で使用するボックスでもある.一部のブロック要素は、基本的な箱のほかに、list-item要素などの追加の箱を生成する可能性があります.これらの追加の位置は、基本ボックスの設定を参照します.
表ケース(table box)と置換可能要素(replaced element)のほか、1つのブロック級ケース(block-level box)も1つのブロック容器ケース(block container box)である.1つのブロックコンテナボックスは、ブロックレベルのボックスのみを含むか、行内ボックスのみを含む(inline-level box)行内フォーマットコンテキストを確立する(inline formatting context).すべてのブロックコンテナボックスがブロックボックスであるわけではない:置換不可改行内ブロック(non-replaced inline block)と置換不可テーブルセル(non-replaced table cell)はブロックコンテナであるがブロックボックスではない.
ブロック級ボックスが同時にブロック容器であれば、ブロックボックス(block box)と呼ばれます.
曖昧にならない場合は、3つの用語、block-level box、block container box、およびblock boxはいずれもblockと略される場合がありますので、ご注意ください.
9.2.1.1 Anonymous block box
//TODO
9.2.2ライン内レベル要素とライン内ボックスInline-level elements and inline boxes1つのラインボックス(inline box)は、ラインレベルのボックス(inline-level)であり、その内容がラインフォーマットコンテキストに組み込まれている.
1つの属性display:inlineの置換不可要素は、行内ボックスを生成します.ラインボックス(inline box)ではないラインレベルボックス(inline-level box)(例えば置換可能inline-levelエレメント、inline-blockエレメント、またはinline-tableエレメント)は、ライン内フォーマットコンテキストに加わる場合、行の書式設定コンテキストを単一の不透明なボックスとして使用します.
9.2.3atomic inline-level boxケース
CSS 3のRun-in.このセクションの目的は、ドキュメントパーティションの符号化を以前のドラフトと一致させることだけです.
9.2.4'Display: run-in'属性display属性は次の値に設定できます.

display:1つの要素に1つのボックスを生成します.

block:1つの要素に1つのライン内レベルのボックスコンテナを生成させる.

内部はブロックボックスにフォーマットされ、要素自体は原子行内レベルボックスにフォーマットされる.

inline-block:1つの要素に1つ以上のラインボックスを生成させる.

inline:1つの要素(例えばlist-item

)を1つの基本ブロックボックスと1つのマーキングボックスとを生成する.

:一つの要素をフォーマット構造から消す.

箱は全く発生せず、レイアウトに影響を及ぼさず、構造上存在しない.

子孫要素も箱を作らず、レイアウトに影響を及ぼさず、構造からも消える.

子孫ノードに再設定してもnone他の値であっても、これらのノードを構造に戻すことはない.

注意:display本当の意味での消失:視覚フォーマット構造から消失し、もちろん視覚的にも見えません.注意この点はdisplay:noneとは違います.

visibility:hidden , table , inline-table , table-row-group , table-column , table-column-group , table-header-group , table-footer-group , table-row , table-cell

これらの値は、要素を表要素として表現するために使用される.

1つの要素のtable-caption属性の指定値と計算値は、次の2つの場合を除き、同じです.

display位置決めまたはフローティングエレメント

positioned and floating element根元素

以上の2つの場合、root element属性計算値がどのように変化するかについては、Relationships between「display」、「position」、and「float」のセクションを参照してください.display属性の初期値は常にdisplayですがinline(つまりブラウザ)のデフォルトスタイルシートではこの値が書き換えられるのが一般的です.HTML 4のUser Agentを参考にできます.
HTML 4のsample style sheetHTML 4要素の典型的なフォーマットを記述しており、この表は現在のUAの実践に関する広範な研究に基づいている.このテーブルは、正規ではなく情報的です.独自のインプリメンテーションでは、開発者はこの表で各要素のデフォルトのスタイルを理解できます.
9.3位置決め案sample style sheetCSS2.1では、1つのボックスは、次の3つの位置決めスキームの1つのレイアウトを使用できます:1.正常な流れ2.フローティング3.ぜったいいち
9.3.1位置決めスキームの選択:Positioning scheme属性
//TODO
9.3.2 position
//TODO
9.4正常流Box offsets: 'top', 'right', 'bottom', 'left'//TODO
9.4.1 Normal flow
//TODO
9.4.2 Block formatting contexts
//TODO
9.4.3 Inline formatting contexts
//TODO
9.5フローティングRelative positioning//TODO
9.6絶対位置決めFloat//TODO
9.7三者の関係:Absolute positioning,display,position//TODO
9.8正常な流れ、フローティング、および絶対位置の比較
//TODO
9.9階層展示float//TODO
9.10文字方向:Layered presentationおよびdirection属性
//TODO
原文の住所を規範化する