English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
視覚的なフォーマットモデルは、コンピュータのスクリーンのような視覚メディアでドキュメントツリーの要素を処理する方法を説明します。
CSSの視覚的なフォーマットモデルは、視覚メディアのドキュメントを処理するアルゴリズムです。視覚的なフォーマットモデルでは、ドキュメントツリーの各要素は、以下に基づいて処理されます。フレームモデル0個または複数のフレームを生成します。
これらのフレームのレイアウトは以下の要因によって決定されます：
ボックスのサイズ。
要素のタイプ（ブロックまたはインライン）。
ドキュメントツリーの要素間の関係。
外部情報、例えばビューポートのサイズ、画像の内蔵サイズなど。
注意：ドキュメントツリーは、元のドキュメントにエンコードされた要素の階層構造です。ドキュメントツリーの各要素は、ルート要素を除いて、1つの親要素を持っています。
ウェブページに表示される各要素は、矩形フレームを生成します。以下では、要素が生成する可能性のあるフレームのタイプについて説明します。
ブロックレベル要素は、視覚的にブロックとして形式化される要素です（すなわち、利用可能な全幅を占める）そして、要素の前後に改行が含まれます。例えば、段落要素（<p>）タイトル（<h1> - <h6>）区切り（<div>）などのものが含まれます。
通常、ブロックレベル要素はインライン要素や他のブロックレベル要素を含むことができます。
インラインレベル要素は、元のドキュメントで新しいコンテンツブロックを構成しない要素です；内容は行に分布されます。例えば、段落（<em>）範囲（<span>）強調要素（<strong>）などの強調テキスト内に含まれます。
インライン要素は通常、テキストや他のインライン要素のみを含むことができます。
注意：ブロックレベル要素とは異なり、インラインレベル要素は必要な幅のみを占めるだけで、強制的に改行しません。
CSS display属性を使用して、要素がウェブページ上でどのように表示されるかを変更できます。以下で学びます。次の章でdisplay属性について学びます。