CSS 仕様 > 9 ビジュアル フォーマット モデル ビジュアル フォーマット Model_html/css_WEB-ITnose

视觉格式化模型 Visual Formatting Model

URL：http://www.w3.org/TR/CSS2/visuren.html

Translator: HaoyCn

Date: 10th of Aug, 2015

本文并未全部翻译，译者在原文基础上稍有添加图示。如了解全部信息，请参看规范原版。个人水平有限，欢迎指正。

9.1 视觉格式化模型介绍

本章和下章用于描述视觉格式化模型：用户代理 User Agent如何在视觉媒体 Visual Media 下处理文档树 Document Tree。

视觉格式化模型中，文档树中的每一个元素根据盒模型 Box Model 产生零个或多个盒。这些盒的布局由以下内容控制：

盒的尺寸和类型

定位体系 Positioning Scheme（常规流，浮动和绝对定位）

文档树中元素之间的关系

外部信息（如：视口大小，图片的固有尺寸等）

本章及下章定义的属性适用于连续媒体和页面媒体 Paged Media。然而，外边距属性的意义在页面媒体中有所不同（详情见页面模型）。

视觉格式化模型没有指定格式化的所有方面（如，没有指定字符间距算法）。本规范没有覆盖到的格式化问题上，符合规范的用户代理也可能表现不一。

9.1.1 视口 The Viewport

在连续媒体 Continuous Media 上工作的用户代理一般会向用户提供一个视口（屏幕上的一个窗口或其它可视区域）来帮助用户访问文档。用户代理可以在调整视口大小的同时改变文档的布局（见初始包含块 Initial Containing Block）。

如果视口小于渲染文档的画布区域，用户代理应提供一个滚动机制。每个画布最多有一个视口，但用户代理可以把文档渲染到多个画布上（即为相同文档提供不同视图）。

9.1.2 包含块 Containing Blocks

CSS2.1中，许多盒的定位和大小都根据一个名为包含块 Containing Block 的矩形盒的边缘来计算。一般地，生成的盒会充当其后代盒的包含块；我们称盒为其后代“创建”了包含块。说“盒的包含块”即是说“盒所处的包含块”，而不是盒所产生的包含块。

每个盒会被赋予一个相对于其包含块的位置，但它不会被局限在其包含块内；它有可能溢出。

包含块的尺寸如何计算的细节将在下章讲述。

9.2 盒的生成 Controlling Box Generation

本节描述CSS2.1中可生成的盒类型。盒的类型会影响其在视觉格式化模型中的表现。下面描述的 display 属性用来指定盒的类型。

9.2.1 块级元素 Block-level Elements 和 块盒 Block Boxes

块级元素是源文档中会被视觉格式化为块状（例：段落）的元素。display 属性的以下值会让一个元素成为块级元素：block、list-item以及table。

块级盒Block-level Boxes是参与块格式化上下文 Block Formatting Context 的盒。每个块级元素生成一个主要的块级盒 Principal Block-level Box 来包含其后代盒和生成的内容，同时参与定位体系 Positioning Scheme。某些块级元素还会在主要盒之外产生额外的盒：list-item 元素。这些额外的盒会相对于主要盒来摆放。

除了（下章要讲的）表格盒 Table Boxes，和可替换元素（Replaced Elements），一个块级盒同时也是一个块容器盒 Block Container Box，一个块容器盒要么只包含块级盒，要么创建一个行内格式化上下文 Inline Formatting Context 并只包含行内级盒 Inline-level Boxes。并非所有的块容器盒都是块级盒：不可替换的行内块 Bon-replaced Inline Blocks 和不可替换的表格单元格 Non-replaced Table Cells 也是块容器但不是块级盒。是块级盒、同时也是块容器的盒称作块盒 Block Boxes。

这三个术语，“块级盒”、“块容器盒”、“块盒”在意义明确时可简称为“块”。

9.2.1.1 匿名块盒

在一个如下文档中：

dc6dce4a544fdca2df29d5ac0ea9906b
Some text

More text

16b28748ea4df4d9c2150843fecfba68

(div と p の両方が display: block に設定されていると仮定します) div にはインライン コンテンツとブロック コンテンツの両方が含まれているようです。境界の書式設定を簡単にするために、「テキスト」を囲む匿名ブロック ボックスがあると仮定します。

写真に示すように、ボックスが 3 つあり、そのうちの 1 つは匿名ボックスです。

言い換えると、ブロック コンテナ ボックス (上の例で div 用に生成されたボックスなど) の中にブロック レベルのボックス (上の例の p など) がある場合、強制的にブロック レベルのボックスのみが含まれるようにします。箱。

インライン ボックスにドキュメント フロー内のインフロー ブロック レベル ボックスが含まれている場合、インライン ボックス (および同じライン ボックス内のそのインライン祖先) はブロック レベル ボックス内にあります (およびその連続または中断のみ)ドキュメント フロー要素から分離されたブロック レベルの兄弟で区切られた折りたたみ可能な空白スペース）、インライン ボックスは（片側が空の場合でも）2 つのボックスに分割され、ブロック レベル ボックスの両側に 1 つずつ配置されます。ブレークの前後の行ボックスは両方とも匿名ブロック ボックスに含まれており、ブロック レベル ボックスは匿名ブロック ボックスの兄弟になります。このようなインライン ボックスが相対位置の影響を受けると、その結果として生じる移動は、それを含むブロック レベルのボックスにも影響します。

このモデルは以下の例に適用されます。ルールは次のとおりであるとします。

{ display: inline }
span { display: block }

は、次の HTML ドキュメントに適用されます:

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
8fd33a433b783f5aca9567a9f8c654a5
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d

これは、SPAN の前の匿名テキストです。
45a2772a6b6107b401db3c9b82c049c2これは SPAN のコンテンツです。54bdf357c58b8a65c66d7c19c8e4d114
これは SPAN の後の匿名テキストです。

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

p 要素には、匿名テキスト C1 の一部が含まれ、その後にブロックレベルの要素が含まれ、その後に別の匿名テキスト C2 が続きます。結果は、ボディを表すブロック ボックスです。これには、C1 の周囲の匿名ブロック ボックス、スパンのブロック ボックス、および C2 の周囲の別の匿名ブロック ボックスが含まれます。

匿名ボックスの継承プロパティは、それを含む非匿名ボックス (サブセクション見出し「匿名ブロック ボックス」の下の例の div ボックスなど) から継承されます。匿名ボックスの非継承プロパティは初期値を取得します。たとえば、匿名ボックスのフォント プロパティは div から継承されますが、その余白は 0 です。

要素が匿名ブロック ボックスの生成を引き起こす場合、要素に設定された属性は、要素によって生成されるボックスおよび要素のコンテンツにも適用できます。たとえば、上記の例では、p 要素に境界線が設定されている場合、境界線は C1 (行末で開いている) と C2 (行末で閉じている) の周囲に描画されます。

一部のユーザー エージェントは、他の方法でブロックを含むインラインに境界線を実装します。たとえば、そのインライン ブロックを「匿名行ボックス」に配置し、これらの匿名行ボックスの周囲にインライン境界線を描画します。 CSS1 と CSS2 はこの動作を定義していないため、CSS1 または CSS2 をサポートするユーザー エージェントのみが他の形式でこれを実装し、CSS2.1 仕様のこの部分に準拠していると主張します。これは、CSS 2.1 仕様のリリース後のユーザー エージェントに対しては行われません。

IE6 での影響:

パーセンテージ値を計算するとき、匿名ブロック ボックスは無視され、最も近い非匿名祖先ボックスに置き換えられる必要があります。たとえば、上記の div で、匿名ブロック ボックスの子ボックスが、高さのパーセンテージを取得するために、そのボックスを含むブロックの高さを知る必要がある場合。次に、匿名ブロック ボックスの高さではなく、div によって形成された包含ブロックの高さを使用します。

9.2.2 インラインレベルの要素とインラインボックス

インラインレベルの要素は、ソース文書内の要素であり、内容に対して新しいブロックを形成せず、その内容が複数の行に分散されています (段落、インラインテキスト、インライン画像など)。次の表示属性値は、インライン、インラインテーブル、およびインラインブロックのインラインレベル要素を生成します。インライン レベルの要素はインライン レベルのボックスを生成し、これらのボックスはインライン フォーマット コンテキストに参加します。

インライン ボックスはインライン レベルのボックスであり、そのコンテンツはインライン ボックスのインライン書式設定コンテキストに参加します。表示値が inline の置換不可能な要素は、インライン ボックスを生成します。インライン レベル ボックスではないインライン レベル ボックス (置換されたインライン レベル要素、インライン ブロック要素、インライン テーブル要素など) は、単一の不透明なボックスとしてインライン書式設定コンテキストに参加するため、アトミック インライン レベル ボックスと呼ばれます。 。

9.2.2.1 匿名インライン ボックス

ブロック コンテナー要素内に直接含まれる (インライン要素内に含まれない) テキストは、匿名インライン要素として扱われなければなりません。

HTML ドキュメントは次のとおりです:

いくつかの強調されたテキスト

p は、いくつかのインライン ボックスを含むブロック ボックスを生成します。強調されたボックスはインライン要素 em によって生成されたインライン ボックスですが、他のボックス (一部およびテキスト) はブロック レベル要素 p によって生成されたインライン ボックスです。これらの後者のボックスには、関連するインライン レベルの要素がないため、匿名インライン ボックスと呼ばれます。

これらの匿名インライン ボックスの継承可能なプロパティは、親ブロック ボックスから継承されます。継承されていないプロパティは初期値を取得します。上記の例では、匿名インライン ボックスの色は p から継承されますが、背景は透明です。

空白のコンテンツは、折りたたむことができる場合、空白属性に従って匿名のインライン ボックスを生成しません。

本仕様書では、文脈に基づいて匿名ボックスの種類が明確に定義できる場合には、匿名インラインボックスも匿名ブロックボックスも匿名ボックスと呼ぶことができる。

テーブルをフォーマットすると、より多くの種類の匿名ボックスが表示されます。

9.2.3 Run-in Boxed

セクション番号を以前のドラフトと一致させるために、このセクションは予約されています。 display: run-in は CSS3 で定義されるようになりました (「CSS 基本ボックス モデル」を参照)。

9.2.4 表示属性

(翻訳者注: ここには一般的な値の簡単な紹介のみが記録されています)

block この要素はブロック ボックスを生成します。

inline-block 要素は、インラインレベルのブロックコンテナを作成します。インライン ブロックの内部はブロック ボックスとしてフォーマットされ、要素自体はアトミック インライン レベル ボックスとしてフォーマットされます。

inline 要素は 1 つ以上のインライン ボックスを生成します。

none 要素は書式設定構造に表示されません (つまり、ビジュアル メディアでは要素はボックスを作成せず、レイアウトにも影響しません)。その子孫要素もボックスを作成しません。要素とその内容は書式設定構造から完全に削除されます。子孫要素に表示属性を設定しても、この動作はオーバーライドされません。

none 値は表示ボックスを生成しないことに注意してください。ボックスはまったく生成されません。 CSS には、書式設定構造内の要素のボックスを作成し、書式設定に影響を与えるメカニズムがありますが、ボックス自体は表示されません。詳細については、可視性セクションをご覧ください。

位置決め要素と浮動要素、およびルート要素 (以下を参照) を除き、計算された値は指定された値と同じです。ルート要素の計算値は以下のように変更されます。

display の初期値はインラインですが、ユーザー エージェントのデフォルトのスタイルシート ルールがこの値をオーバーライドする可能性があることに注意してください。付録の HTML4 参照スタイルシートを参照してください。

9.3 配置スキーム

CSS2.1 では、ボックスは次の 3 つのシステムに従ってレイアウトされます:

通常のフロー。 CSS 2.1 では、通常のフローには、ブロック レベル ボックスのブロック フォーマット、インライン レベル ボックスのインライン フォーマット、およびブロック レベル ボックスとインライン レベル ボックスの相対的な配置が含まれます。

浮きます。フロートモデルでは、ボックスはまず規則的な流れに従って配置され、次に規則的な流れから切り離され、できるだけ左または右に移動されます。フロートの周りにコンテンツをレイアウトできます。

絶対位置決め Absolutr Positioning。絶対位置決めモデルでは、ボックスは通常のフローから完全に切り離され (後続の兄弟要素には影響を与えません)、含まれているブロックに基づいて位置が割り当てられます。

フローティング要素、絶対配置要素、ルート要素はすべてアウトオブフローと呼ばれ、その他の要素はドキュメントフロー内でインフローと呼ばれます。要素 A のレイアウト フローは、ドキュメント フロー内にあり、ドキュメント フローの中で最も近い祖先が A である要素 A で構成されます。

9.3.1 位置決めシステムの選択: 位置属性

(訳者注: このセクションの翻訳は省略されています)

static: ボックスは通常のフローに従ってレイアウトされた通常のボックスです。 、右、下、左の属性が失敗しました。

relative: ボックスの位置は通常のフローに従って計算されます (ボックスは通常のフロー内に位置すると見なされます)。次に、ボックスは通常の位置に対して相対的に移動されます。ボックス B が相対的に配置されている場合、ボックス B の後のボックスの位置は、B が移動していないかのように計算されます。 table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、および table-caption は前回定義されていませんでした。

absolute: ボックスの位置 (および場合によってはサイズ) は、top、right、bottom、left 属性によって指定されます。これらのプロパティは、ボックスに含まれるブロックに基づいて動きを指定します。絶対に配置されたボックスは文書の流れから切り離されます。これは、兄弟ボックスの後続のレイアウトには影響を与えないことを意味します。同時に、絶対配置ボックスにマージンがある場合でも、他のマージンのように崩れることはありません。

fixed: ボックスの位置は絶対モデルに従って計算されますが、それ以外の場合、ボックスは何らかの基準に対して固定されたままになります。絶対モデルと同様に、ボックスのマージンは他のマージンのように折りたたまれません。ハンドヘルド、プロジェクション、スクリーン、タイプライター tty、およびテレビ tv メディア タイプでは、ボックスはビューポートに対して固定されており、スクロールしても移動しません。印刷メディア タイプでは、ページがビューポート (印刷プレビューなど) を介してアクセスされた場合でも、ボックスはすべてのページにレンダリングされ、ページ ボックスに基づいて固定されます。この動作は他のメディア タイプでは定義されていません。開発者は、依存メディアに基づいて修正を指定できます。たとえば、ボックスを画面ビューポートの上部に固定したいが、印刷ページの上部には表示したくない場合は、次のように @media ルールを使用して 2 つの設定を分離できます:

@media screen {
h1#first { 位置: 固定 }
}
メディア印刷 {
h1#first { 位置: 静的 }
}

ユーザーエージェントはページ内の固定ボックスの内容を表示できません。ユーザーエージェントは他の方法を使用して非表示のコンテンツを印刷する場合があることに注意してください。第 13 章「ページボックス外のコンテンツ」を参照してください。

ユーザーエージェントは、ルート要素上の位置を静的として扱うことができます。

9.3.2 ボックスのオフセット: 上、右、下、左

(翻訳者注: このセクションは一時的に省略されています。CSS マニュアルを参照してください)

9.4 通常のフロー

通常のフロー内のボックスはすべて書式設定コンテキスト (ブロック書式設定コンテキストまたはインライン書式設定コンテキストのいずれか) に属しますが、両方には属しません。ブロックレベルのボックスはブロックフォーマットコンテキストに参加し、インラインレベルのボックスはインラインフォーマットコンテキストに参加します。

9.4.1 ブロック書式設定コンテキスト

浮動要素、絶対配置要素、ブロック ボックスではないブロック コンテナ (インライン ブロック、テーブル セル、テーブル キャプションなど)、およびオーバーフロー属性は、表示されるブロック ボックスではありません。 (値がビューポートに伝播される場合を除く) その内容に対して新しいブロックレベルの書式設定コンテキストが作成されます。

ブロックの書式設定コンテキストでは、ボックスは、含まれるブロックの上部から垂直に次々に配置されます。 2 つの兄弟ボックス間の垂直距離は、マージン プロパティによって異なります。同じブロック フォーマット コンテキスト内の隣接するブロック レベル ボックスの垂直方向のマージンは折りたたまれます。

ブロック書式設定コンテキストでは、各ボックスの左外端は、それを含むブロックの左端と対になります (右から左への書式では、ボックスの右外端は、包含ブロックの右端と対になります) )、フロートを使用する場合でも、ボックスが新しいブロック書式設定コンテキストを作成しない限り、これは当てはまります (ただし、ボックス内の行ボックスはフロートにより縮小する可能性があります) (この場合、ボックス自体はフロートにより狭くなる可能性があります)。

ページ付きメディアでのページネーションの詳細については、「ページネーションの許可」のセクションを参照してください。

9.4.2 インライン書式設定コンテキスト

インライン書式設定コンテキストでは、ボックスは、それを含むブロックの上から水平に次々と配置されます。ボックスの水平方向のマージン、境界線、パディングはすべて、レイアウト時に考慮されます。ボックスは、さまざまな方法で垂直方向に整列できます。ボックスは、下または上に整列することも、コンテンツ テキストのベースラインに整列することもできます。すべてのボックスを一列に含む長方形の領域をライン ボックスと呼びます。

ラインボックスの幅は、含まれるブロックとフロートによって異なります。ライン ボックスの高さは、ライン ボックスの高さの計算セクションで指定されたルールによって異なります。

ローボックスは常に、そこに含まれるすべてのボックスを収容できる十分な高さがあります。ただし、それが含まれる最も高いボックスよりも高くなる場合があります (たとえば、含まれるボックスはベースラインに揃えられています)。ボックス (B) の高さが、それを含む行ボックスの高さより小さい場合、B の垂直方向の配置は、vertical-align プロパティによって決定されます。複数のインラインレベルボックスが 1 つのラインボックスに横方向に収まらない場合は、縦に並んだ 2 つ以上のラインボックスに分割されます。したがって、段落は複数の行ボックスを垂直に積み重ねたものです。ライン ボックスは (特に明記されていない限り) 垂直方向の間隔を空けずに積み重ねられ、重なり合うことはありません。

一般的に、ライン ボックスの左端は、そのボックスを含むブロックの左端と接し、その右端は、そのブロックを含むブロックの右端と接します。ただし、フローティング ボックスを、包含ブロックとライン ボックスの端の間に配置することもできます。したがって、同じ行内の書式設定コンテキスト内の行ボックスの幅 (包含ブロックの幅) が一定であっても、フローティングによって使用可能な水平方向のスペースが減少するため、行ボックスの幅は依然として変化する可能性があります。同じ行内の書式設定コンテキスト内の行ボックスの高さは、多くの場合異なります (たとえば、ある行には画像が含まれますが、他の行にはテキストのみが含まれる場合があります)。

行内のインラインレベルのボックスの合計幅が、それらを含む包含ブロックよりも小さい場合、行内の水平方向の分布は text-align 属性に依存します。正当な場合、ユーザー エージェントはインライン ボックス内のスペースと単語の間隔を引き伸ばすことができます (インライン テーブル ボックスとインライン ブロック ボックスを除く)。

インラインボックスの幅がラインボックスの幅を超える場合、インラインボックスは複数のボックスに分割され、分割されたボックスは複数のラインボックスに分散されます。インライン ボックスを分割できない場合 (たとえば、インライン ボックスに 1 文字が含まれているか、言語固有のハイフネーション規則でハイフネーションが許可されていない場合、またはインライン ボックスの空白属性値が nowrap または pre である場合)、インライン ボックスは分割されません。ラインボックス。

インライン ボックスが分割されると、マージン、境界線、およびパディングはブレークポイントで視覚的に影響を与えません。

インライン ボックスは、双方向テキスト処理により、ライン ボックス内の複数のボックスに分割される場合もあります。

インライン書式設定コンテキスト内にインライン レベルのコンテンツを含めるために、ライン ボックスがオンデマンドで作成されます。一部の行ボックスにはテキストが含まれず、空白、ゼロ以外のマージン、パディング、境界線を持つインライン要素、ドキュメント フロー内のその他のインフロー コンテンツ (画像、インライン ブロック、インライン テーブルなど) が保持され、保持されません。末尾の改行は、それに含まれる要素の位置を決定する目的では高さゼロの行ボックスとして扱われ、他のすべての目的では存在しないものとして扱われなければなりません(MUST)。

以下はインラインボックスの構築例です。下位段落 (HTML ブロックレベル要素 p によって作成される) には、em と Strong で交差する匿名テキストが含まれます。

この
文にはいくつかの強調された単語が登場します、親愛なる

p 要素は、5 つのインライン ボックスを含むブロック ボックスを生成し、そのうち 3 つは匿名です:

「： 匿名:」 いくつかの「

• EM:」 強調語「
• 匿名:」 が出現します 「
  強い:」 この「

• 匿名: 「親愛なる文」

段落をフォーマットするには、クライアントはそれらの間に 5 つのインライン ボックスを配置します。この例では、p 要素によって生成されたボックスは、ライン ボックスの包含ブロックを作成します。含まれているブロックの幅が十分に広い場合、すべてのインライン ボックスは 1 行のボックスに配置されます:

• この文にはいくつかの強調された単語が表示されます

• 幅が十分でない場合は、インライン ボックスは分割されて分散されます。複数行のボックス。段落は次のようになります。この場合、em ボックスは 2 つの em ボックス (現在は Split1 と Split2 と呼ばれます) に分割されます。マージン、境界線、パディング、またはテキストの装飾は、split1 の前または Split2 の後では視覚的な効果を持ちません。
  次の例を見てください:

  100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e

  <title>Example of inline flow on several lines</title><style type="text/css">

  EM {

  パディング: 2px;

  margin: 1em;

  border-width: middle;

  border-style: crashed;

  line -高さ: 2.4em; } 531ac245ce3e4fe3d50054a55f265927

  9c3bca370b5104690d9ef395f2c5f8d1

  6c04bd5ca3fcae76e30b72ad730ca86d

  いくつかの強調された単語がここに表示されます。

  36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e

  によるとp 幅の場合、これらのボックスは次のように配置できます:
  外側のマージンは、強調された単語の前と後に挿入されます

  
  
  

  内側のマージンは、強調された単語の値の前、上下、および後ろに挿入されます。そして一番下。各単語の 3 つの側面に破線の境界線が表示されます。

  
  
  
  9.4.3 相対位置決め
  
  ボックスが通常の流れまたはフローティングに従ってレイアウトされると、この位置に基づいて相対的に移動されることがあります。これを相対位置決めといいます。この方法でボックス (B1) を移動しても、後続のボックス (B2) には影響しません。B2 には、B1 に変位がないかのように位置が与えられ、B1 の移動後に B2 の位置は変更されません。これは、相対的な配置によってボックスが重なり合う可能性があることを意味します。ただし、相対的な配置により、overflow:auto または overflow:scroll ボックスがオーバーフローする場合、クライアントはスクロール バーを作成して、ユーザーがコンテンツに (オフセット位置で) アクセスできるようにする必要があり、レイアウトに影響を与える可能性があります。
  
  相対的に配置されたボックスは、改行や元々そのために確保されていたスペースを含む、通常のフロー サイズを維持します。 「包含ブロック」セクションでは、相対的に配置されたボックスが新しい包含ブロックを作成する場合について説明します。
  
  相対的に配置された要素の場合、ボックスのサイズを変更せずに左右に水平に移動します。左はボックスを右に移動し、右はボックスを左に移動します。 left または right によってボックスが分割または引き伸ばされることはないため、適用される値は常に left = - right を満たします。
  

  左と右の値が両方とも auto (デフォルト値) の場合、適用される値は 0 です (つまり、ボックスは元の位置に残ります)。
  left が auto の場合、その適用値は right の負の値になります (つまり、ボックスは right の値だけ左に移動します)。
  
  右が自動の場合、適用される値は左の負の値です。
  左も右も自動でない場合、位置は過度に制約されており、いずれかの値を無視する必要があります。含まれているブロックの方向プロパティの値が ltr である場合、左の値が優先され、右の値が -left に変わります。含まれているブロックの方向属性の値が rtl である場合、右側の値が優先され、左側の値は無視されます。
  例。次の 3 つのスタイル ルールは同等です。
• div.a8 {

  位置: 相対;

  方向: ltr;
左: -1em;
• 右: auto

  }

  div.a8 {
位置: 相対;

方向: ltr;

左: 自動;

右: 1em

}

div.a8 {

position:relative;

direction:ltr;

left:-1em;

right:5em

}

top属性とbottom属性は、サイズを変更せずに相対位置要素を上下に作成します。変位。上は下に移動し、下は上に移動します。上部または下部によってボックスが分割または引き伸ばされることはないため、適用される値は常に上部 = - 底部を満たします。両方とも auto の場合、値は 0 になります。いずれかの値が auto の場合、プロパティはもう一方のプロパティの負の値を取ります。どちらも auto でない場合、bottom は無視されます (つまり、bottom には top の負の値が適用されます)。

注: スクリプト環境で相対位置ボックスを動的に移動すると、アニメーション効果が生成されることがあります (visibility 属性を参照)。相対位置は上付き文字と下付き文字の効果に使用できますが、行の高さは位置を考慮せずに自動的に調整されます。詳細については、「行の高さの計算」セクションの説明を参照してください。

相対配置の例は、通常のフロー、フロート、および相対配置を比較するセクションで提供されます。

9.5 フロート

現在の行で左または右に移動されたボックスはフロートと呼ばれます。フロートの最も興味深い機能は、コンテンツをフロートの隣にレイアウトできることです (または、clear 属性によって無効にできます)。コンテンツは、左側のフローティング ボックスの右側、または右側のフローティング ボックスの左側にレイアウトされます。次のコンテンツは、フローティング配置とコンテンツ レイアウトの概要です。 float の動作を制御するガイドラインについては、float プロパティに関するセクションで説明されています。

フローティングボックスは、その外側が収容ボックスの端または別のフローティング外側エッジに接触するまで、左または右に移動します。ライン ボックスが存在する場合、フローティング ボックスの上部の外縁はライン ボックスの上部と位置合わせされます。

フロートを置くための水平方向の十分なスペースがない場合は、フロートを配置できるか、他のフロートがなくなるまで下に移動します。

フロートは通常のフローにないため、フロートの前後に作成された未配置のブロック ボックスは、フロートが存在しないかのように垂直に配置されます。ただし、現在のライン ボックスとフロートの後に作成されたライン ボックスは、フローティング マージン ボックス用のスペースを確保するために、必要に応じて短縮されます。

次の 4 つの条件をすべて満たす垂直位置がある場合、ライン ボックスは隣り合ってフロートします:

ライン ボックスの上部またはその下

ライン ボックスの下部または上部

はフロートの上マージンエッジの下のフロート上にあり、

はフロートの下マージンエッジの上にあります

注: これは、外側の高さの合計が 0 または負の高さを持つフロートは、ラインボックスを短くしないでください。

ライン ボックスが短くなり、コンテンツを保持できなくなった場合、コンテンツが収まるかフロートがなくなるまで、ライン ボックスは下に移動します (幅が再計算されます)。現在の行のフロート ボックスより前のコンテンツは、同じ行のフロートの反対側に移動され、再レイアウトされます。つまり、左フロートが配置される前にインライン レベルのボックスがライン ボックスに配置され、ライン ボックスの残りのスペースに左フロートを収容できる場合、左フロートはライン内に配置されます。ライン ボックスの上部に合わせて配置され、左側のフロートがライン ボックス内に配置され、このライン ボックスに入るインライン レベルのボックスはフロートの右側に移動します (右側はフロートの反対側です)。左のフロート）、rtl と右のフロートの場合はその逆です。

テーブル、ブロックレベルの置換可能な要素、または通常のフローで新しいブロック書式設定コンテキストを作成する要素 (可視以外のオーバーフロー値を持つ要素など) の場合、それらの境界ボックスは、同じフローティング要素内の同じフローティング要素に属することはできません。マージン ボックスが重なると、ブロックの書式設定コンテキストが表示されます。必要に応じて、フロートを既存のフロートの後ろに配置することでフロートを消去する効果を実現する必要がありますが、十分なスペースがある場合はフロートの隣に配置することもできます。ただし、これにより要素のボックスがセクション 10.3.3 で定義されたものよりも狭くなる可能性があります。 CSS2 では、ユーザー エージェントがフロートの隣に要素を配置できるタイミングや、要素をどの程度狭くできるかが定義されていません。

例。以下の文書フラグメントでは、包含ブロックがフロートの隣にコンテンツを収容できるほど大きくないため、コンテンツをフロートの下に移動し、その text-align プロパティに基づいて行ボックス内に配置する必要があります。

{

幅: 10 メートル;
ボーダー: ソリッド アクア;
フロート: 5 エム;
ボーダー: ソリッド ブルー;

次のルールは、class="icon" を持つすべての img ボックスを左にフロートさせます (そして左マージンを 0 に設定します)。

img.icon {
float: left;
margin-left: 0;

}

次の HTML コードとスタイルシートを考えてみましょう。

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7Float exampleb25a9407cfe693f10872c2a72988c045

080b747a20f9163200dd0a7d304ba388

img { float: left }

body, p, img { margin: 2em }

531ac245ce3e4fe3d50054a55f265927

9c3bca370b5104690d9ef395f2c5f8d1

b9a5d54e3299f89cc8be70c27a7a55d9

他にはないサンプル テキスト...
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

img ボックス左にフロートします。後続のコンテンツは、フロートの右側にフォーマットされ、フロートと同じ行から始まります。 float の隣の行ボックスは float によって短縮されますが、その後は「通常の」幅 (つまり、p 要素によって作成された包含ブロックの幅) に戻ります。ドキュメントは次のように書式設定されています:

ドキュメントが次の場合、書式設定結果は同じです:

6c04bd5ca3fcae76e30b72ad730ca86d


サンプルテキスト
e4055a95c41b7abf0e0534f18fb373f4
これには他にありません...
36cc49f0c466276486e50c850b7e4956

これは、フロートの左側のコンテンツがフロートに置き換えられ、フロートの右側に再レイアウトされるためです。浮く。

セクション 8.3.1 の冒頭で述べたように、フローティング要素のマージンは、隣接するボックスのマージンと一緒に崩れることはありません。したがって、前の例では、p ボックスと img float ボックスの垂直方向のマージンは崩れません。

フローティングされたコンテンツは、要素を配置し、新しいスタッキング コンテキストを作成し、フロートの親スタッキング コンテキストのマージに参加する要素を除き、フロートが新しいスタッキング コンテキストを作成したかのようにスタックされます。フロートは、通常のフロー内の他のボックスと重なることがあります (たとえば、フロートの隣の通常のフロー ボックスに負のマージンがある場合)。オーバーラップが発生すると、フロートは非配置インフロー ブロックの上とインライン ボックスの下にレンダリングされます。

これは、通常のフローでフロートが要素の境界線に重なる場合を示す例です。

フローティング イメージは、重なっているブロック ボックスの境界線をブロックします

次の例は、コンテンツがフロートの隣にレイアウトされないようにするために、clear 属性を使用する方法を示しています。

ルールが次のとおりであるとします。

{ clear: left }

書式設定の結果は次のようになります:

両方の段落に clear: left が設定されているため、2 番目の段落が「プッシュダウン」されます。 「 」をフロートの下の位置に移動します。これは、上マージンの上に「ギャップ」が追加された結果です (clear 属性を参照)

9.5.1 フロートの位置決め: float 属性

(翻訳者注: ここでは省略されています。CSS を参照してください)マニュアル)

ユーザーエージェントは、ルート要素の float を none として扱うことができます。

以下は、フローティング動作を管理するガイドラインです:

左フローティング ボックスの左外端は、そのボックスを含むブロックの左端の左側にあってはなりません。右フロート要素にも同じことが当てはまります。

現在のボックスが左にフローティングし、前のソース ドキュメント内の要素が左にフローティング ボックスを生成している場合、以前に生成されたボックスごとに、現在のボックスの左外端が、現在のボックスの右外端の上にあります。以前に生成されたボックスを右側に配置するか、現在のボックスの上部が以前に生成されたボックスの下部よりも低くなければなりません。右フロート要素にも同じことが当てはまります。

左側のフローティング ボックスの右外縁は、その隣にある右のフローティング ボックスの左外縁の右側にあってはなりません。右フロート要素にも同じことが当てはまります。

フローティング ボックスの上部外縁は、そのボックスを含むブロックの上部よりも高くすることはできません。フロートが 2 つの折りたたまれたマージンの間に表示される場合、フロートは通常のフローに参加している空の匿名の親があるかのように配置されます。この親ブロックの位置は、マージンの縮小に関する章のルールによって決まります。

フローティング ボックスの上端は、ソース ドキュメント内の前の要素によって生成されたブロック ボックスまたはフローティング ボックスの上端よりも高くすることはできません。

要素のフローティング ボックスの上部外縁は、ソース ドキュメント内の前の要素によって生成されたボックスが配置されている行ボックスの上部よりも高くすることはできません。

左フローティング ボックスの左側に別の左フローティング ボックスがある場合、その右の外縁は、そのボックスを含むブロックの右端の右側にあってはなりません。 (より緩やかなルール: ボックスができるだけ左にない限り、左フロート要素は、それを含むブロックの右端を超えて拡張することはできません。) 同じことが右フロート要素にも当てはまります。

フローティングボックスはできるだけ高い位置に配置する必要があります。

左側のフローティング ボックスはできるだけ左側に配置し、右側のフローティング ボックスはできるだけ右側に配置する必要があります。高い位置は、左右に近い位置よりも優先されます。

しかし、CSS2.1 では、ブロック書式設定のコンテキストで、ドキュメント フロー内に負の垂直方向の高さのマージンがあり、フロートが本来よりも高い位置に配置される場合、そのような負のマージンはすべて次のようになります。ゼロに設定すると、フロートの位置は未定義になります。

これらのルールで言及されている他の要素は、float と同じブロック書式設定コンテキストに属する他の要素のみを参照します。

この HTML フラグメントの結果は b が右に浮動したものになります

a92eb7bc1f1cbb2434bfafea1285716eeb54bdf357c58b8a65c66d7c19c8e4d114

p 要素の幅が十分に広い場合、a と b はそれぞれ次のように片側を占めます:

9.5.2 フローティング後のフローの制御:clear 属性

(翻訳者注: この属性は簡単に紹介されています。CSS マニュアルを参照してください)

この属性は、要素の特定の側は、前のボックスと同じようにフローティングすることはできません。 clear 属性は、それ自体内または他のブロック書式設定コンテキスト内の浮動小数点数を考慮しません。

非フローティング ブロック レベル ボックスに適用される場合、各値は次の意味を持ちます:

left: ボックスの上境界線は、生成された左フローティング ボックスの外側の下端よりも低い必要があります。ソース文書内の前の要素によって。

right: ボックスの上境界線は、ソースドキュメント内の前の要素によって生成された右フローティングボックスの外側の下端よりも低くする必要があります。

両方: ボックスの上境界線は、ソース文書内の前の要素によって生成された左右のフローティング ボックスの外側の下端よりも低くする必要があります。

none: フロートに対するボックスの位置に制約はありません。

「なし」以外の値では、クリアランス ギャップが生じる可能性があります。ギャップはマージンの崩壊を防ぎ、要素上のマージン上のスペースとして機能します。ギャップは、要素をフロート全体に垂直に押し込むために使用されます。

クリア値が設定された要素のギャップを計算するには、まず要素の上境界エッジの想定位置を計算します。これは、要素のクリア属性値が none の場合に実際の境界エッジがあるはずの位置です。

要素の上端エッジの仮定された位置が関連するフロートを横切らない場合、ギャップが発生し、8.3.1 章のルールに従ってマージンの崩壊が計算されます。

ギャップの高さは、次のいずれか大きい方に設定されます。

ブロックの境界エッジが、クリアされる最下位のフロートの下部外側エッジと交差しないようにするために必要な高さ。

• ブロックの上端の境界線を、想定される位置の必要な高さに配置します。

  2 つのうちの 1 つを選択した場合、ギャップの高さは最初の高さになります。

  注: 2 つの方法と現在の Web コンテンツとの互換性を評価する必要があります。将来の CSS 仕様では、どちらかが指定される予定です。

  注: ギャップはマイナスまたはゼロにすることができます。

  例 1: (簡単にするために) 3 つのボックスがあり、規則は次のとおりであると仮定します。B1 ブロックの下マージンは M1 (B1 にはサブ要素もパディングもボーダーもありません)。フローティング ブロック F は H、B2 ブロックの高さは H です。上部マージンは M2 です (パディングまたはボーダーなし、子要素なし)。 B2のクリアは両方に設定されています。 B2 が空ではないと仮定します。

  B2のclear属性に関わらず、状況は下図の通りです。 B1とB2の余白が潰れています。 B1 の下境界エッジは y = 0 の位置にあり、F の上部境界エッジは y = M1 の位置にあり、B2 の上境界エッジは y = max(M1,M2) の位置にあり、 F の底は y = M1+H の位置にあります。

  また、B2 が F の下にないと仮定します:

  max(M1,M2)

  つまり、仕様に記載されているように、ギャップを追加する必要があります。

  ギャップ C1 と C2 を 2 回計算し、2 つのうち大きい方を取る必要があります: C = max(C1,C2)。最初の方法は、B2 の上部を F の底部と同一平面上に配置することです。つまり、B2 を y= M1+H に配置します。また、余白間のギャップによって余白の崩れが防止されることも意味します:

  F の下端 = B2 の上端の境界線?

  M1 + H = M1 + C1 + M2 ?

  C1 = M1 + H - M1 - M2 = H - M2

  2 番目の計算は、y=max(M1,M2) にある B2 の先頭位置を維持することです。つまり、

  max(M1,M2) = M1 + C2 + M2 ?

  C2 = max (M1,M2) - M1 - M2

  max(M1,M2)

  C2 = max(M1,M2) - M1 - M2

  C2

  そして C1 = H - M2 であるため、

  が得られます。 C2

  So

  C = max(C1,C2) = C1

  例 2: この例のギャップの高さは負の -1em です。 (すべての要素に境界線やパディングがないと仮定します)

  
  最初の段落。
  

  
  

  
  フローティング段落。
  

  
  

  
  最後の段落。
  

  注: クリアがない場合は、最初の段落と最後の段落 両方の段落の余白が折りたたまれ、最後の段落の上端がフローティング段落の上部と同じ高さになります。ただし、クリアすると、上部の境界エッジがフロートよりも低くなります。つまり、2em 低くなります。つまり、間違いなくギャップが生じるということです。その結果、外側マージンは折り返されなくなり、ギャップの高さクリアランスは

  clearance + margin-top = 2em

  を満たすようになります。つまり、

  clearance = 2em - margin-top = 2em - 3em = - 1em

  clear が設定されている場合 浮動要素上では、浮動配置ルールが変更されます。第 10 条の追加規定は次のとおりです。

• (フロート要素にクリアが設定されている場合) フロートの上外縁は、それまでのすべての左フローティング ボックスの下外縁よりも低くなければなりません (フローティング要素の場合)クリア: 左)、または前のすべての右フローティング ボックスよりも低い (クリア: 右の場合)、または前の左右のフローティング ボックスよりも低い (クリア: 両方の場合)。

  注: CSS1 のこのプロパティはすべての要素に適用されるため、すべての要素で効果を実現できます。 CSS2 および CSS2.1 では、clear 属性はブロックレベルの要素のみをサポートします。したがって、開発者はこの属性をブロックレベルの要素にのみ適用する必要があります。インライン要素の明確なフローティング効果を実現したい場合は、上記のようにギャップを設定するのではなく、強制的に改行して 1 つ以上の空の行ボックスを挿入する (または、9.5 章で説明したように新しい行ボックスを移動する) 必要があります。フローティング要素をクリアする インライン要素のライン ボックスはフロート ボックスよりも低くなります。

9.6 絶対位置決め

絶対位置決めモデルでは、ボックスはその包含ブロックに従って正確に変位されます。ボックスは通常のフローから完全に切り離されています (後続の兄弟要素には影響しません)。絶対配置ボックスは、通常のフローの子と絶対配置 (固定配置されていない) 子孫を含む新しいブロックを作成します。ただし、絶対配置された要素の内容は他のボックスのフローには含まれません。重なっているボックスのスタック レベルによっては、絶対に配置された要素の内容が他のボックスの内容を覆い隠す (または覆い隠される) 場合があります。

9.6.1 固定位置決め

固定位置決めは、絶対位置決めの下位システムです。唯一の違いは、固定位置ボックスを含むブロックがビューポートによって作成されることです。連続メディアでは、ドキュメントがスクロールされても固定ボックスは移動しません。この意味では、固定背景画像に似ています。ページ メディアでは、固定位置ボックスがページごとに繰り返されます。これは、各ページの下部にロゴを配置するなどのレイアウトに役立ちます。ページ領域よりも大きい位置決めボックスが切り取られる問題を修正しました。初期化された包含ブロックに表示されていない場合、位置決めボックスが印刷されない問題を修正しました。

開発者は、固定配置を使用してフレームのようなレイアウトを作成できます。次のフレーム レイアウトを考えてみましょう:

これは、次のような HTML ドキュメントとスタイル ルールを使用して実現できます:

100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
b2386ffb911b14667cb8f0f91ea547a7CSS 2.1 を使用したフレーム ドキュメント6e916e0f7d1e588d4f442bf645aedb2f
a286c59d4154f8b2f4efcf4e44f41830
body { height: 8.5in }/ 计算百分百高必要 /
#header {
位置: 固定;
幅: 100%;
高さ: 15%;
上: 0;
右: 0;
下: 自動;
左: 0;
}
#sidebar {
位置:固定;
幅:10em;
高さ:自動;
上:15%;
右:自動;
下:100px;
左:0;
}
#main {
位置:固定;
幅:自動;
高さ:自動;
上:15%;
右:0;
下:100px;
左:10em;
}
#footer {
位置:固定;
幅: 100%;
高さ: 100px;
上: 自動;
右: 0;
下: 0;
左: 0;
}
531ac245ce3e4fe3d50054a55f265927
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
3a4ddf72e2da3e530ff0883c8707ffe9 ... 16b28748ea4df4d9c2150843fecfba68
b2d09af91f95878de6395e105fff6b2a ... 16b28748ea4df4d9c2150843fecfba68
243a8f3f087936dc3f96e2f0cf018c22 ... 16b28748ea4df4d9c2150843fecfba68
774c916c2fdb9fccdaa16933d065e968 ... 16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

9.7 表示、位置、浮動小数点の关系

三种属性均影响盒生成及布局、它们的対話如下:

表示値が何もない場合、position と float は使用されません。この場合、要素はカラムを生成しません。なし、表示の設定は次の表のようになります。

要素が根要素の場合、CSS2.1 では list-item の指定値が計算ブロックまたは list-item であるかどうかを除いて、次の表のように設定が表示されます。そうでない場合は、表示プロパティ値は指定値を使用します。

：インライン、テーブル行グループ、テーブル列、テーブル列グループ、テーブルヘッダーグループ、テーブルフッターグループ、テーブル行、テーブルセル、テーブルキャプション、インラインブロック

计算值：ブロック

指定值

：その他

• 计算值：同指定值