ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 仕様 > 10 ビジュアルフォーマットモデルの詳細_html/css_WEB-ITnose
CSS 仕様 > 10 ビジュアルフォーマットモデルの詳細_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:521283ブラウズ
原文: http://www.w3.org/TR/CSS2/visudet.html
翻訳者注: この記事の全文は翻訳されていません (最近、学生を募集して、仕事なので勉強しなければいけないというプレッシャーが大きいので、最初に力仕事をしなければなりません）そのため、幅と高さの最大値と最小値の部分は一時的に省略されています）。記事内の内容や写真には、私が独自に理解した内容も含まれていますが、いちいち表記しておりません。なお、記事中には用語が多く出てきますので、原文の英語を最後に記載しました。最後に、さまざまなブラウザーでのvertical-align 属性の互換性が非常に優れていることについて文句を言いたいと思います。読者の皆様がこの互換性の問題についてご存知の場合は、疑問を解消するために必ずメッセージを残してください。この属性の問題も後で時間をかけて解決します。
10.1 「包含ブロック」の定義
要素のボックスの位置とサイズは、要素の包含ブロックと呼ばれる特定の長方形に基づいて計算されることがあります。要素の包含ブロックは次のように定義されます:
ルート要素が配置される包含ブロックは、連続メディアでは、初期包含ブロックと呼ばれる長方形であり、そのサイズはビューポート サイズであり、その基点はキャンバスの原点です。 。ページ分割されたメディアでは、最初に含まれるブロックはページ領域です。最初の包含ブロックの方向属性は、ルート要素の方向属性と同じです。
他の要素の場合、要素の位置が相対的または静的である場合、その要素を含むブロックは、最も近いブロック コンテナーの祖先ボックスのコンテンツの端になります。
要素にposition:fixedがある場合、その要素を含むブロックは、連続メディアのビューポートまたはページ分割されたメディアのページ領域によって作成されます。
要素の位置が絶対である場合、その要素を含むブロックは、次の場合に位置値が絶対、相対、固定である最も近い祖先によって作成されます。
祖先要素がインライン要素の場合、その要素を含むブロックはブロックは、この要素に対して生成された最初と最後のインライン ボックスのパディング ボックスの境界ボックスで囲まれています。 CSS 2.1 では、インライン要素が複数行にまたがる場合、それを含むブロックは定義されません。
それ以外の場合、包含ブロックはその祖先要素のパディングエッジから形成されます。
そのような祖先要素がない場合、包含ブロックが最初の包含ブロックになります。
ページ分割されたメディアでは、絶対に配置された要素は、(ドキュメントが連続しているかのように) すべての改ページを無視して、その要素を含むブロックに対して相対的に配置されます。要素は分割され、複数のページにまたがる場合があります。
絶対配置コンテンツの場合、レイアウトされているページ (現在のページ) 以外のページ上の位置、または印刷用にレンダリングされた現在のページ上の位置に解決される場合、プリンターはコンテンツを配置することがあります。内:
現在のページの他の場所
次のページ、または
このコンテンツを省略
注: 複数のページにまたがるブロックレベルの要素は、各ページで異なる幅を持つ可能性があります。デバイス固有の制限が適用される場合があります。
配置がない場合、次のドキュメント:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>Illustration of containing blocks</title></head><body id="body"> <div id="div1"> <p id="p1">This is text in the first paragraph...</p> <p id="p2">This is text <em id="em1"> in the <strong id="strong1">second</strong> paragraph.</em></p> </div></body></html>
の包含ブロックは次のように作成されます:
包含ブロックの要素を生成
html => (
body => html
div1 => body
p1 => div1
p2 => div1
-
em1 => p2 に依存します
strong1 => ; p2
div1 を配置すると:
#div { position: absolute; left: 50px; top: 50px;} その包含ブロックは本体ではなくなり、その包含ブロックが最初の包含ブロックになります (他に配置された祖先ボックスがないため)。
em1 も配置すると:
#div1 { position: absolute; left: 50px; top: 50px;}#em1 { position: absolute; left: 100px; top: 100px;} 生成されたボックスのフォームは次のようになります:
生成されたボックスの要素=> 含まれるブロックの生成された要素
html =>ユーザープロキシ)
body => html
div1 => div1
-
p2 =>
- em1 => div1
- strong1 => em1
- em1 を配置した後、その包含ブロックは、最も近くに配置された祖先ボックス (つまり、div によって生成されたボックス) になります。
10.2 コンテンツの幅: width 属性
翻訳者注: この属性の簡単な説明については、CSS マニュアルを参照してください
この属性は、ボックスのコンテンツの幅を指定します。
属性値の意味は次のとおりです。この属性は、置換不可能なインライン要素には適用されません。置換不可能なインライン要素のボックスの幅は、その中にレンダリングされるコンテンツの幅です (子要素の相対的な配置の前)。インライン ボックスはインライン ボックスと整列していることを思い出してください。ライン ボックスの幅は、そのボックスを含むブロックによって指定されますが、float によって縮小される場合があります。
Length d82af2074b26fcfe177e947839b5d381
コンテンツ領域の幅を 1 つの長さ単位で指定します。
パーセント f78113d1a82a15cadbe8fa962dc306cf
指定一个百分比宽度。百分比根据生成盒的包含块的宽度计算。CSS2.1中，如果包含块的宽度依赖于该元素的宽度，那么布局结果为未定义。注意：对于包含块是基于一个块容器元素的绝对定位元素而言，百分比是根据该块容器元素的内边距盒的宽度计算的。这是对CSS1的修改，CSS1中百分比宽度始终根据父元素的内容盒计算。
auto
宽度取决于其他属性。参见下文。
负值的 width 非法。
例如，下面的规则将段落的内容宽度改成100像素。
p { width: 100px } 10.3 计算宽度和外边距
元素用于布局的 width、margin-left、margin-right、left 以及 right 属性，其值取决于生成盒的类型以及属性彼此。（布局所采用的值有时被称为使用值）。基本上，使用值同计算值一致，是把计算值 auto 替换为某些适当值，而百分比根据包含块计算，但也有例外。需要辨析下列情形：
行内不可替换元素
行内可替换元素
常规流中块级不可替换元素
常规流中块级可替换元素
浮动不可替换元素
浮动可替换元素
绝对定位不可替换元素
绝对定位可替换元素
常规流中行内块不可替换元素
10. 常规流中行内块可替换元素
1-6点和9-10点中，相对定位元素的 left 和 right 值根据9.4.3章节规则计算。
注意：下面计算出的 width 的使用值不一定是最终结果，视 min-width 和 max-width，有可能必须多次计算，参见本章下述的最小和最大宽度。
10.3.1 行内不可替换元素
width 值无效。margin-left 和 margin-right 的 auto 计算值转换为使用值 0。
10.3.2 行内可替换元素
margin-left 和 margin-right 的 auto 计算值转换为使用值 0。
如果 height 和 width 计算值均为 auto并且该元素有固有宽度，那么固有宽度即 width 的使用值。
如果 height 和 width 计算值均为 auto并且该元素没有固有宽度，但有固有高度和固有比例；或者如果 width 计算值为 auto，height 有其他计算值，并且元素有固有比例；那么 width 的使用值为：
高度使用值 * 固有比例
如果 height 和 width 计算值均为 auto并且该元素有固有比例，但没有固有高度或固有宽度，那么CSS2.1中 width 的该使用值未定义。然而建议是，如果包含块的宽度本身不依赖于该可替换元素的宽度，那么 width 的使用值根据常规流中块级不可替换元素的约束方程式来计算。
否则，如果 width 有计算值 auto，并且元素有固有宽度，那么固有宽度即 width 使用值。
否则，如果 width 有计算值 auto，但不符合以上任何条件，那么 width 使用值为300px。如果300px太宽超出设备，用户代理应当代之使用2:1比例且设备容得下的最大矩形的宽度。
10.3.3 常规流中块级不可替换元素
下述约束必须在下述其他属性的使用值中成立：
margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right = 包含块宽度
如果 width 不为 auto 且 border-left-width + padding-left + width + padding-right + border-right-width（加上不为 auto 的 margin-left 或 margin-right）比包含块的宽度还要宽，那么以下规则中 margin-left 和 margin-right 的任何 auto 值都被视为零。
如果以上所有属性的计算值都不为 auto，则这些值被称为“过度约束”，且其中一个使用值必须同其计算值不同。如果包含块的 direction 属性值为 ltr，则忽略 margin-right 的指定值，其值计算成使得等式成立的值。如果 direction 属性值为 rtl，则更改 margin-left。
译者：getComputedStyle 以及 Console 面板上的盒模型显示的是计算值而非使用值。当三个属性被过度约束时，某一个外边距（视 direction 属性而定）的计算值尽管是指定值，但其实使用值是根据公式来计算的。
如果其中正好仅一个值指定为 auto，则该值由等式计算得出。
如果 width 设为 auto，那么其他任何 auto 值变为 0 并且 width 由等式计算得出。
如果 margin-left 和 margin-right 均为 auto，其使用值相等。将根据包含块的边缘水平居中该元素。
10.3.4 常规流中块级可替换元素
width 的使用值根据行内可替换元素的规则决定。外边距根据不可替换块级元素的规则决定。
10.3.5 置換不可能な浮動要素
margin-left または margin-right が auto と評価される場合は、値 0 を使用します。
幅が auto と評価された場合、使用される値は「フィットするように縮小」幅です。
焼きばめ幅の計算は、自動テーブル レイアウト アルゴリズムを使用してテーブル セルの幅を計算するのと似ています。大まかに言うと、適切な幅は、明示的に改行されている場所を除いて改行されるようにコンテンツをフォーマットすることによって計算され、推奨される最小幅も、たとえばすべての改行を試すことによって計算されます。次に、利用可能な幅を見つけます。この場合、その幅は、含まれているブロックの幅から、margin-left、border-left-width、padding-left、padding-right、border-right-width、margin-right を引いたものになります。関連するすべてのスクロール バーの幅。
すると、収縮適応幅は次のようになります: min(max(推奨される最小幅、利用可能な幅)、推奨される幅)。
10.3.6 フローティング置換可能要素
margin-left または margin-right の計算値が auto の場合、その使用値は 0 です。幅アルゴリズムを使用して、行内の要素を置き換えます。
10.3.7 絶対的に配置された置換不可能な要素
このセクションと次のセクションの目的上、(要素の)「静的位置」という用語は、要素が通常のフロー内にあると想定される場所を大まかに指します。正確には:
静的位置を含むブロック 静的位置を含むブロックは、要素の位置の指定値が静的であり、float が none であると仮定した場合の、要素の最初のボックスの包含ブロックです。 (セクション 9.7 の規則により、仮定された計算では、異なる表示計算値を仮定する必要がある場合があることに注意してください)。
left の静的位置は、その位置の値が静的で、浮動小数点数が none の場合に、要素の最初のボックスとなる仮想ボックスの左マージン端まで、包含ブロックの左端からの距離です。 。ボックスがそのブロックを含むブロックの左側にあるとみなされる場合、この値は負の値になります。
right の静的位置は、包含ブロックの右端から上の仮想ボックスの右マージン端までの距離です。ボックスがそのブロックを含むブロックの左側にあると想定される場合、この値は正になります。
しかし、実際に仮想ボックスの寸法を計算するのではなく、ユーザーエージェントは可能な位置を自由に想定できます。
静的位置を計算する目的では、固定配置された要素の包含ブロックがビューポートではなく最初の包含ブロックとなり、すべてのスクロール可能なボックスは元の位置までスクロールされると想定される必要があります。
絶対的に配置された置換不可能な要素の値の制約は次のとおりです:
left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right =含まれるブロック幅
left、width、right がすべて auto の場合: まず、auto の margin-left と margin-right の値を 0 に設定します。次に、ブロックを含む静的位置を作成する要素の方向属性が ltr の場合、静的位置に left を設定し、以下の 3 番目のルールを適用します。それ以外の場合は、right に設定して最初のルールを適用します。
3 つのいずれも auto でない場合: margin-left と margin-right が auto の場合、計算結果が負の場合、margin-left と margin-right の方向が等しいという追加の制約の下で方程式が計算されます。含むブロック ltr(rtl) の場合、margin-left(margin-right) をゼロに設定し、margin-right(margin-left) を計算します。 margin-left または margin-right のいずれかが auto の場合、方程式を評価してその値を見つけます。バイナリ値が過度に制約されている場合は、左側の値を無視するか (方向が rtl の場合)、右側の値を無視して (方向が ltr の場合)、この値を再計算します。
それ以外の場合は、margin-left と margin-right の値を auto に 0 に設定し、次の 6 つの該当するルールのいずれかを採用します。
左と幅が自動で、右が自動ではない場合、幅は適応するために縮小します。次に左を計算します。
left と right は auto ですが、width は auto ではありません。ブロックを含む静的位置を設定する要素の方向属性が lrt の場合は、静的位置として left を設定し、それ以外の場合は right を設定します。次に、左 (方向が rtl の場合) または右 (方向が ltr の場合) を計算します。
幅と右は自動、左は自動ではない場合、縮小して適応します。それから正しく計算してください。
左は自動、幅と右は自動ではない、左を計算します。
幅は自動ですが、左右は自動ではないので、幅を計算します。
右は自動、左と幅は自動ではないので右に計算します。
焼きばめ幅の計算は、自動テーブル レイアウト アルゴリズムを使用してテーブル セルの幅を計算するのと似ています。大まかに言うと、適切な幅は、明示的に改行されている場所を除いて改行されるようにコンテンツをフォーマットすることによって計算され、推奨される最小幅も、たとえばすべての改行を試すことによって計算されます。 CSS2.1 では正確なアルゴリズムが指定されていません。次に、利用可能な幅を見つけます。左 (最初のケース) または右 (3 番目のケース) を 0 に設定して幅を計算します。
すると、縮小適応幅は次のようになります: min(max(推奨される最小幅, 利用可能な幅), 推奨される幅)
10.3.8 絶対的に配置された置換可能な要素
この場合、セクション 10.3.7 の制約式が適用されます。ただし、このセクションの残りの部分は次のルールに置き換えられます:
left と right の値が両方とも auto の場合、ブロックを含む静的位置を設定する要素の方向属性が ltr の場合、静的位置として left を設定し、方向が ltr の場合、right を静的位置として設定します。静的な位置。
left または right が auto の場合、auto の margin-left と margin-right を 0 に設定します。
この時点で margin-left と margin-right がまだ auto である場合、方程式は、計算結果が負の場合、2 つのマージン値が等しくなければならないという追加の制約の下で計算されます。含まれているブロックは ltr (rtl) で、margin-left (margin-right) を 0 に設定し、margin-right (margin-left) を計算します。
この時点でオートが残っている場合、計算式は値を取得します。
この時点で値 (翻訳者注: margin-left と margin-right) が過度に制約されている場合は、左 (包含ブロックの方向属性が rtl の場合) または右 (方向が ltr の場合) を無視し、この値を再計算します。
10.3.9 通常のフローインラインブロック内の置換不可能な要素
幅が自動の場合、使用される値は、浮動要素と同様に、幅に適応するために縮小されます。
自動の値で計算された margin-left または margin-right は、値 0 を使用します。
10.3.10 通常のフローのインラインブロック置換可能要素
インライン置換可能要素。
10.4 最小幅と最大幅
翻訳者注: 一時的に省略
10.5 コンテンツの高さ
パーセンテージは、生成されたボックスの包含ブロックの高さに基づいて計算されます。含まれるブロックの高さが明示的に指定されておらず (たとえば、高さがコンテンツの高さに依存する)、要素が絶対的に配置されていない場合、値は auto になります。ルート要素の高さのパーセンテージは、元の包含ブロックを基準にしています。注: ブロックベースのブロックレベル要素を含む絶対配置要素の場合、パーセンテージはブロックレベル要素のパディングボックスの高さに基づいて計算されます。これは、パーセンテージが常に親要素のコンテンツ ボックスに基づいて計算される CSS1 からの変更です。
注: 絶対配置された要素を含むブロックの高さは、絶対配置された要素自体とは何の関係もないため、そのような要素の高さのパーセンテージは常に解決できます。ただし、この高さは、ドキュメント内の後の要素が処理されるまで分からない場合があります。
負の値は不正です。
10.6 高さとマージンを計算する
上、マージン-上、高さ、マージン-下、および下を計算するには、異なるボックスで次の区別を行う必要があります:
インラインの置換不可能な要素
インラインの置換可能な要素
通常フローのブロックレベルの置換不可能な要素
通常のフローのブロックレベルの置換可能要素
フローティングの置換不可能な要素
フローティングの置換可能要素
絶対位置的には非置換可能な要素
絶対に配置された置換可能な要素
通常のフローインラインブロック内の置換可能な要素
10. 通常のフローインラインブロック内の置換可能な要素
ポイント 1 ～ 6 および 9 ～ 10 の使用値上部と下部のセクション 9.4.3 の規則に従います。
注: これらのルールは、他の要素と同様にルート要素に適用されます。
注: 以下で計算される高さの使用値は、必ずしも最終結果であるとは限りません。最小高さと最大高さに応じて、計算が複数回繰り返される場合があります。以下の「最小高さと最大高さ」を参照してください。
10.6.1 インラインの置換不可能な要素
画像ソース: http://blog.justfont.com/
翻訳者注: 行の高さボックス EM-Box は、上部と下部の間の高さボックスです。終了行
高さ 適用されません。コンテンツ領域の高さはフォントに基づく必要がありますが、この仕様ではその方法は指定されていません。ユーザー エージェントは、たとえば、行の高さのボックス Em-Box やフォントの最大の Ascender と Descender を使用する場合があります。 (後者では、行の高さボックスの上または下の一部の文字がコンテンツ領域内に収まることが保証されますが、フォントごとに異なるサイズのボックスが作成されます。前者では、作成者が行の高さを基準にしてテキストを制御できることが保証されます。 . 背景デザインだけでなく、文字がコンテンツ領域の外に描画されることもあります)
注: CSS3 では、コンテンツの高さに使用するフォント スキームを選択するプロパティが導入される可能性があります。
インラインの置換不可能なボックスの垂直方向のパディング、境界線、およびマージンは、行の高さに関係なく、コンテンツ領域の上部と下部から始まります。ただし、行ボックスの高さの計算には行の高さのみが使用されます。
この仕様では、複数のフォントが使用されている場合のコンテンツ領域の高さは指定されていません (文字が異なるフォントから作成されている場合はこれが可能です)。ただし、コンテンツ領域が (1) 行の高さボックス、または (2) 要素内のすべてのフォントの最大の上部と下部を収容できるだけの高さになるように高さを選択することをお勧めします。これらのフォントのベースラインの配置によっては、この高さが関連するフォント サイズよりも大きくなる場合があることに注意してください。
10.6.2 インライン置換可能要素、ドキュメントフロー内のブロックレベル置換可能要素、ドキュメントフロー内のインラインブロック置換可能要素、およびフローティング置換可能要素
margin-top または margin-bottom が auto の場合、その使用値は 0 です。
高さと幅の計算値が両方とも auto で、要素に固有の高さがある場合、固有の高さは高さによって使用される値です。
それ以外の場合、高さの計算値が auto で、要素に固有の比率がある場合、高さの使用値は次のようになります:
幅の使用値/固有比率
それ以外の場合、高さの計算値が auto で、要素に固有の比率がある場合、要素に固有の高さがある場合、固有の高さが使用される高さの値になります。
それ以外の場合、計算された高さの値が auto であっても、上記の条件がいずれも満たされない場合、高さの使用値は 2:1 の比率で最大の長方形の高さに設定する必要があります。 150px を超え、幅はデバイスの幅以下です。
10.6.3 オーバーフローが可視と評価される場合のドキュメント フロー内のブロックレベルの置換不可能な要素
このセクションは、オーバーフローが非可視と評価されるが伝播された場合のドキュメント フロー内のブロックレベルの置換不可能な要素にも適用されますビューポートに。
margin-top または margin-bottom が auto の場合、その使用値は 0 です。高さが自動の場合、高さは要素にブロックレベルの子要素があるかどうか、および要素にパディングまたはボーダーがあるかどうかによって異なります:
要素の高さは、コンテンツの上端から以下の最初に一致する状況までの距離です:
最後の行ボックスの下端 (その行ボックスが 1 つ以上の行を含むインライン書式設定コンテキストを確立する場合)
最後のドキュメント内フロー子要素の下端 (折りたたまれている可能性がある) マージン子要素の下マージンは、要素の下マージンで折り畳まれません
子要素の上マージンが要素の上マージンで折り畳まれていない場合、ドキュメント フロー内の最後の子要素の下枠エッジ要素のマージンは折りたたまれています
それ以外の場合はゼロ
ドキュメントフロー内の子要素のみが考慮されます（たとえば、フローティングボックスと絶対位置のボックスは無視され、相対位置のボックスはそれらの変位を考慮しません）。なお、サブボックスは匿名ブロックボックスであってもよい。
10.6.4 絶対に配置された置換不可能な要素
このセクションと次のセクションでは、(要素の)「静的位置」という用語は、通常のフローにおける要素の位置を大まかに指します。正確に言うと、top の静的位置は、要素の位置値が静的で、float が none の場合に、包含ブロックの上端から、要素の最初のボックスである仮想ボックスの上マージン端までの距離です。 、クリアはなし。 (セクション 9.7 の規則により、仮定された計算では、異なる表示計算値を仮定する必要がある場合があることに注意してください)。
しかし、実際に仮想ボックスの寸法を計算するのではなく、ユーザーエージェントは可能な場所を自由に想定できます。
静的位置を計算するには、固定位置要素の包含ブロックがビューポートではなく最初の包含ブロックになります。
絶対的に配置された置換不可能な要素の垂直サイズ値は、次の制約を満たす必要があります:
top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin -bottom +bottom = ブロックの高さが含まれます
top、height、bottom がすべて自動の場合、top を静的位置とし、以下の 3 番目のルールを適用します:
3 つのいずれも自動でない場合: if margin-top と margin-自動の場合、方程式は 2 つのマージン値が等しいという追加の制約を使用して評価されます。 margin-top または margin-bottom のいずれかが auto の場合、方程式を評価します。バイナリ値が過度に制約されている場合は、下限値を無視して、この値を再計算します。
それ以外の場合は、以下の 6 つの該当するルールのいずれかを選択してください。
top と height が auto で、bottom が auto ではない場合、高さは 10.6.7 に基づいて、値 auto で margin-top と margin-bottom を設定し、top を計算します。
上と下が自動で、高さが自動ではない場合、上を静的位置として設定し、自動の margin-top と margin-bottom を 0 に設定して、下を計算します。
高さと下が自動で上が自動ではない場合、高さ 10.6.7 に基づいて、自動値を 0 に設定して margin-top と margin-bottom を設定し、下を計算します。
topは自動、高さと下は自動ではない場合、自動値でmargin-topとmargin-bottomを0に設定し、topを計算します。
高さは自動で、上と下は自動ではない場合、自動値で margin-top と margin-bottom を 0 に設定し、高さを計算します。
bottom は自動で、top と height は自動ではありません。次に、auto の値で margin-top と margin-bottom を 0 に設定し、bottom を計算します。
10.6.5 絶対的に配置された置換可能な要素
要素に固有の高さがあることを除いて、他の状況は前のセクションと同様です。置換シーケンスは次のようになります:
高さは、行内の置換可能な要素の値を使用して計算されます。 margin-top または margin-bottom で値 auto が指定されている場合、使用される値は次の規則によって決定されます。
上と下が両方とも自動の場合、上を要素の静的な位置に置き換えます。
bottom が auto の場合、auto の margin-top または margin-bottom の値は 0 に置き換えられます。
この時点で margin-top と margin-bottom がまだ auto である場合、方程式は 2 つのマージンが等しくなければならないという追加の制約の下で計算されます。
この時点で auto が 1 つだけ残っている場合、計算式が評価されます。
この時点でバイナリ値が過度に制約されている場合は、下位の値を無視して、この値を再計算します。
10.6.6 複雑な状況
このセクションは以下に適用されます:
overflow は、ドキュメント フロー内のブロックレベルの置換不可能な要素であり、その計算値は表示されません (overflow 属性値がビューポートに伝播された場合を除く)。
インラインブロックの置換不可能な要素
フローティングの置換不可能な要素
margin-top または margin-bottom が auto の場合、その使用値は 0 です。高さが auto の場合、高さはセクション 10.6.7 の要素の子孫によって決まります。
インライン ブロック要素の場合、マージン ボックスはライン ボックスの高さの計算に含まれます。
10.6.7 ブロックフォーマットコンテキストルートの自動高さ
場合によっては(例えば、上記のセクション10.6.4および10.6.6を参照)、ブロックフォーマットコンテキストを確立する要素の高さは次のように計算されます:
要素にインラインレベルの子要素のみがある場合、その高さは、最上部の行ボックスの上部から最下部の行ボックスの下部までの距離になります。
要素にブロック レベルのサブ要素がある場合、その高さは、最上位のブロック レベル サブボックスの上マージン エッジから最下位のブロック レベル サブボックスの下マージン エッジまでの距離になります。
絶対的に配置されたサブ要素は無視する必要があり、配置ボックスを決定する際にそれらの変位は考慮されません。サブボックスは匿名のブロック ボックスである場合があることに注意してください。
さらに、要素の下マージンエッジが要素の下コンテンツエッジよりも低いフローティング子がある場合、高さはそれらのエッジを含むように増加します。このブロックのフォーマットコンテキストに参加するフロートのみが考慮されます。たとえば、絶対位置の子孫内のフロートや他のフロート内のフロートは考慮されません。
10.7 最小高さと最大高さ
翻訳者注: 一時的な省略
10.8 ラインボックスの高さの計算
インライン書式設定のコンテキストセクションで説明したように、ユーザーエージェントはインラインレベルのボックスをラインボックススタックに垂直に配置します。ライン ボックスの高さは次のように決定されます:
ライン ボックス内の各インライン レベル ボックスの高さを計算します。置換可能要素、インライン ブロック要素、およびインライン テーブル要素の場合、高さはそのマージン ボックスの高さであり、インライン ボックスの場合、高さはその行の高さです。 (「レギングとハーフスペース」の高さとマージンとインラインボックスの高さの計算を参照してください。)
インラインレベルのボックスは、vertical-align プロパティに従って垂直に配置されます。上または下に揃える場合は、ライン ボックスの高さが最小になるように揃える必要があります。これらのボックスが十分な高さである場合、複数の解決策があり、CSS2.1 ではこのライン ボックスのベースラインの位置 (つまり、Strut の位置、以下を参照) を指定しません。
行ボックスの高さは、最上部のボックスの上部から最下部のボックスの下部までの距離です。 (柱を含む。説明については、以下の line-height を参照してください。)
空のインライン要素は空のインライン ボックスを生成しますが、これらのボックスにはマージン、パディング、境界線、および行の高さがあるため、コンテンツを持つ要素と同じになります。 . 影響の計算。
10.8.1 行送りと半間隔
CSS は、フォントのプロパティで指定された、各フォントがベースラインより上の特徴的な高さとその下の特徴的な深さを持っていることを前提としています。このセクションでは、(特定のフォント サイズの) 高さを表すために A を使用し、深さを表すために D を使用します。また、上から下までの距離である AD = A + D も定義します。 (下記の「TrueType フォントと OpenType フォントの A と D を見つける方法」を参照してください。) フォントのこれらのプロパティはフォント全体を指しており、必ずしも個々の文字の上部と下部に対応しているわけではないことに注意してください。
ユーザーエージェントは、文字に対応するベースラインに従って、置換不可能なインラインボックス内で文字を配置する必要があります。次に各キャラクターのAとDを決めます。単一要素の文字は異なるフォントから来ている場合があるため、すべての A と D が同じになるわけではないことに注意してください。インライン ボックスに文字がまったく含まれていない場合は、要素の最初に使用可能なフォント (幅 0 の非表示文字) を使用した A および D のピラーが含まれているとみなされます。
次に、各文字に行間隔 L を追加します。ここで、L = 行の高さ - AD です。通常、行送りの半分は A の上に追加され、残りの半分は D の下に追加され、文字とその行送りがベースラインより上の完全な高さ (A' = A + L/2) と完全な深さ (D' = D+) になります。 L/2。
注意。 L は負の値になる場合があります。
すべての文字と文字の両側の半スペースを含むインライン ボックスの高さは、正確に行の高さです。子要素のボックスはこの高さに影響しません。
置換不可能な要素のマージン、境界線、およびパディングはライン ボックスの計算には含まれませんが、これらは依然としてインライン ボックスの周囲にレンダリングされます。これは、line-height で指定された高さが、それを含むボックスのコンテンツの高さよりも小さい場合、パディングと境界線の背景と色が、隣接する行ボックスに「染み込む」可能性があることを意味します。ユーザーエージェントはこれらのボックスをドキュメントの順序でレンダリングする必要があります。これにより、次のボックスの境界線が、前のボックスの境界線とテキストの上に描画されます。
注意。 CSS 2.1 では、インライン ボックスのコンテンツ領域が何であるかを定義していないため (上記の 10.6.1 を参照)、異なるユーザー エージェントが異なる場所に背景や色を描画する可能性があります。
注意。 OpenType フォントおよび TrueType フォント A および D (現在の要素のフォント サイズに変換した後) は、そのフォントの OS/2 テーブルの "sTypeAscender" および "sTypeDescender" プロパティを使用することをお勧めします。これらのプロパティが使用できない場合は、HHEA テーブルの「Ascent」および「Descent」プロパティが使用されます。
行の高さ
于内容由行内级元素组成的块容器元素而言，line-height 指定该元素内行盒的最小高度。此最小高度包括了基线之上的最小高度和之下的最小深度，就如同每个行盒以一个具有该元素字体和行高属性的零宽度行内盒开始一样。我们称此虚构盒为“支柱 Strut ”。（该命名灵感源于Tex。）
字体在基线之上和之下的高度和深度被假定为包含在字体内的特性。（更多细节，参见CSS3。）
于不可替换行内元素而言，line-height 指定用于计算行盒高度的高度。
本属性的值具有如下意义：
normal:
让用户代理设使用值为一个基于元素字体的“合理”值。该值与f1374e300c5c8ffb281c1d382cfdfdc0意义相同。我们推荐 normal 的使用值在1.0到1.2之间。计算值为 normal。
df5beea42319b390f92c4bfa9c87412b
指定长度用于行盒高度计算。负值非法。
f1374e300c5c8ffb281c1d382cfdfdc0
本属性的使用值为此数值乘以本元素的字号。负值非法。计算值于指定值相同。
f5b86981747c219cb9410316fdcc2752
本属性的计算值为此百分比乘以元素的字号计算值。负值非法。
下面例子中的三条规则的行高结果相同：
div { line-height: 1.2; font-size: 10pt } /* number */div { line-height: 1.2em; font-size: 10pt } /* length */div { line-height: 120%; font-size: 10pt } /* percentage */ 当一个元素包含渲染不只一种字体的文本时，用户代理应根据最大字号来决定 normal 的 line-height 值。
注意。如一个块容器盒中的所有行内盒仅有一个共同 line-height 值并且所有行内盒字体相同（并且行内盒中不存在可替换元素、行内块元素等），上述将确保相邻行的基线正好相隔 line-height。这在不同字体的文本列必须对齐时十分重要，比如在表格中。
vertical-align
此属性影响行内级元素生成盒在行盒内的垂直定位。
注意。本属性的值在表格的上下文中有不同含义。请查阅表格高度算法一节了解详情。
下述值仅相对于父行内元素或父块容器元素的支柱 Strut 有意义。
在接下来的定义中，对行内不可替换元素而言，用于对齐的盒是高度为 line-height 的盒（包括了盒的字符以及两侧的半行距，参见上面）。对于其他所有元素，用于对齐的盒是外边距盒。
baseline
把盒的基线同父盒的基线对齐。如果盒没有基线，对齐盒的下外边距边缘与父盒的基线。
middle
把盒的垂直中点同父盒的基线加上父盒一半的 x-height 对齐。
sub
把盒的基线降到父盒的下标的适当位置。（此值对元素的文本字号无影响。）
super
把盒的基线升到父盒的上标的适当位置。（此值对元素的文本字号无影响。）
text-top
把盒的顶部同父盒的内容区域（参见10.6.1）顶部对齐。
text-bottom
把盒的底部同父盒的内容区域（参见10.6.1）底部对齐。
f5b86981747c219cb9410316fdcc2752
把盒提升（正值）或降低（负值）此距离（line-height 值的百分比）。0% 意味着同 baseline 一样。
df5beea42319b390f92c4bfa9c87412b
把盒提升（正值）或降低（负值）此距离。0cm 意味着同 baseline 一样。
下面的值使元素相对于行盒对齐。由于元素可能有子元素相对于它对齐（子元素又可能相对它们自己的后代对齐），下面的值使用对齐子树 Aligned Subtree 的边界。一个行内元素的对齐子树包括该元素以及 vertical-align 值不为 top 或 bottom 的所有子行内元素的所有对齐子树。该对齐子树的顶部是子树内最高的盒顶部，底边也是类似这样。
top
把对齐了的子树顶部同行盒顶部对齐。
bottom
把对齐了的子树底部同行盒底部对齐。
行内表格的基线为表格首行的基线。
行内块的基线为其文档流内最后一个行盒的基线，除非该行内块没有文档流内行盒或者其 overflow 属性计算值不为 visible，这种情况下基线为下外边距边缘。