CSS2.1SPEC: block_html/css_WEB-ITnose を含むビジュアル書式設定モデル

CSS 標準を読んだときに最も理解が深まったのは、当たり前のように思われる多くのスタイル表現にも対応しているということです。サポートメカニズム。この記事では、まずインクルージョン ブロックから始め、規格内の対応する説明を要約し、特に CSS2.1 のサポートが不完全な IE6/7 について、具体的な例に基づいて具体的な分析を行います。私の経験不足のため、この記事にはいくつか問題があると思いますが、皆様にはご容赦いただき、問題点をご指摘いただければ幸いです。

この記事を読む前に、CSS ボックス モデルとビジュアル フォーマット モデルで生成されるさまざまなボックス (ボックス、ボックスとも呼ばれます) とさまざまなレイアウト方法をより正確に理解する必要があります。 Du Yao を読む 偉大な巨匠による 2 つの記事。これら 2 つの記事は、規格の関連する章の翻訳と詳述でもあります。

(1) ビジュアルフォーマットモデルのさまざまなボックス

(2) ディスプレイスメント要素とディスプレイスメントされていない要素

または、CSS2.1 SPEC の関連する章を直接読んでください:

(1) ボックスモデル

( 2) ビジュアルフォーマットモデル

ブロックを含むことについて話す前に、ビジュアルフォーマットモデルについて簡単に説明したいと思います

1. CSS ビジュアルフォーマットモデル

ビジュアルフォーマットモデルは標準では次のように説明されています。 :

ユーザー エージェントがビジュアル メディアのドキュメント ツリーを処理する方法

つまり、最も一般的なユーザー エージェントはブラウザであり、ブラウザのレンダリング エンジンがページの解析とレンダリングを担当します。 . (現在はより直接的にブラウザ カーネルと呼ばれています)、ドキュメントには HTML ドキュメントと他の汎用マークアップ言語で記述されたドキュメントの両方を含めることができます。ビジュアル フォーマット モデルでは、ドキュメント ツリー内の各要素は、ボックス モデルに従って 0 個以上のボックスを生成します。このボックスのレイアウトに影響を与える要素は次のとおりです。

(1) ボックスのサイズとタイプ。ブロックレベルボックス インラインレベルボックスの配置方法とは異なります。

(2) ボックスの配置方法は、要素によって生成されるボックスの配置方法を決定します。配置方法が異なると、レイアウトのルールも異なります。

(3) 他のボックスとの関係 ボックスが 2 つある場合、包含関係か対等関係かによってレイアウトが異なります。

(4) その他の追加情報 (ビューポートのサイズ、移動された要素の固有のサイズなど)

この観点から、ビジュアル フォーマット モデルは、上記の要素がレイアウトにどのような影響を与えるかを詳細に分析したものです。箱の説明。

2. ビューポート

ビューポートという言葉は最初の部分に登場しますが、直感的には、ビューポートは、ユーザーが解析してレンダリングしたドキュメント ツリーを表示するために使用される領域として理解できると思います。ブラウザでは、通常、ビューポートは Web ページをレンダリングするためにブラウザによって使用される領域です。

標準におけるビューポートの説明は次のとおりです:

連続メディアのユーザー エージェント

一般に、ユーザーがドキュメントを参照するためのビューポート (画面上のウィンドウまたはその他の表示領域) を提供します。 太字の連続メディアに注目してください。私たちが普段閲覧している Web ページは連続メディアに属し、プリンターで印刷されるドキュメントのコンテンツはページ化されている必要があるため、ページ化されたメディア、つまりページ化されたメディアになります (ここでの説明は少し大雑把です)。 、単なる個人的な単純な見解です）。 Web ページは連続メディアであるため、Web ページのサイズに応じてビューポートを変更できないという問題が発生します。そのため、ビューポートがドキュメントのサイズより小さい場合、最も一般的なのはスクロール機構を提供する必要があります。ブラウザのスクロール バーを使用すると、ドキュメントで説明されているように、ビューポートを超えてドキュメントを参照できます。

ビューポートがドキュメントがレンダリングされるキャンバスの領域より小さい場合、ユーザーエージェントはスクロールメカニズムを提供する必要があります。

もちろん、ビューポートに関する知識ポイントは上記のように単純ではありません。たとえば、モバイル Web では、ビューポートの関連属性はモバイル Web の開発にとって重要ですが、この記事ではビューポートに関するその他の知識ポイントについては説明しません。当面。

3. 含まれるブロック

Web ページは、ページ上で独自のサイズ、位置、その他のレンダリング属性 (背景色、フォントなど) を持ちます。これらのボックスの位置はレイアウト時に決定されますか?また、ボックスの表示寸法（幅、パディング、ボーダー、マージン）などが定義されていない場合、そのサイズはどのように決定されるのでしょうか？答えの重要なポイントは、包含ブロックです。個人的には、包含ブロックは CSS レイアウトを学習する基礎であると考えていますが、幸いなことに、この概念を理解するのは難しくありません。

まず、標準における包含ブロックの説明を見てみましょう:

要素のボックスの位置とサイズは、要素の包含ブロックと呼ばれる特定の長方形を基準にして計算されることがあります

。つまり、視覚的な書式設定モデルで生成されるさまざまなボックスの位置とサイズは、多くの場合、ボックスを含むブロックである特定の長方形のボックスの端に基づいて計算されます。

注: ボックスの包含ブロックについて話す場合、ボックスが形成する包含ブロックではなく、そのボックスが含まれる包含ブロックを指します。

それでは、ボックスに含まれるブロックを決定するにはどうすればよいでしょうか?対応するルールは標準で指定されています:

3.1 ルート要素の包含ブロック

ルート要素 (HTML の html タグ) の包含ブロックは、初期包含ブロックと呼ばれます: 連続メディア (たとえば、 Web ページとして)、ビューポートのサイズを持ち、キャンバスの原点に配置されます (ビューポートのコンテンツの開始位置として直感的に理解できます。最初の包含ブロックの方向属性が ltr の場合、開始位置はビューポートの左上隅です。rtl の場合は、ビューポートの右上隅です。最初の包含ブロックの方向はルート要素の方向属性と同じで、デフォルトは ltr (左から右) です。

特記事項: 最初の包含ブロックはビューポートのサイズを持ちます。つまり、ビューポートでスクロールが発生した場合でも、幅と高さはビューポートと同じになります

3.2 要素が静的 (デフォルト値) または相対 (相対レイアウト) として配置されている場合、包含ブロックは最も近い祖先ブロック コンテナ ボックスのコンテンツ領域で構成されます。 この点も、ブロックコンテナボックスやコンテンツエリアという言葉が出てきますが、CSSボックスモデルやビジュアルフォーマットモデルの各種ボックスを理解していれば理解できるはずです。以下に簡単な例を示します:

##DEMO 1: 静的または相対的に配置された要素のブロックを含む

CSS コード:

.<strong>container</strong>{<br />    <strong>width</strong>: 1000<strong>px</strong>;<br />    <strong>margin</strong>: 50<strong>px auto</strong>;<br />    <strong>border</strong>: 2<strong>px solid </strong><strong>#000000</strong>;<br />    <strong>padding</strong>: 50<strong>px</strong>;<br />}

HTML コード:

<<strong>div </strong><strong>class=</strong><strong>"container" </strong><strong>style=</strong><strong>""</strong>><br />    <<strong>div </strong><strong>class=</strong><strong>"static-div-1" </strong><strong>style=</strong><strong>"</strong><strong>background</strong>: <strong>#CCCCCC</strong>;<strong>"</strong>><br />        static定位的元素<br />    </<strong>div</strong>><br /></<strong>div</strong>>

黒い境界線を持つコンテナーには 50 ピクセルのパディングがあります。クラス static-div-1 の要素が、IE6/7 のコンテナーのコンテンツ領域に基づいて配置されていることがわかります。

3.3 要素が絶対として配置されている場合の包含ブロック

位置が絶対である要素の場合、その包含ブロックは非静的配置属性を持つ最も近いブロックです (つまり、位置は

<1> この要素がブロック コンテナ ボックス要素の場合、包含ブロックはこの要素のパディング エッジによって形成されます

<2> ;要素がインライン要素である場合、それを含むブロックは、インラインレベル要素の最初と最後の行ボックスを囲むボックスによって形成されます。インライン要素が複数行に分割されている場合、それを含むブロックは CSS 2.1 では定義されていません。

そのような祖先が存在しない場合、その祖先を含むブロックが最初の包含ブロックになります

注：在分页媒体中包含不一样的情况，本文暂不讨论分页媒体中的情况

absolute的情况相对复杂一些，看以下例子：

##DEMO 2：绝对定位元素的包含块(1)-块容器框形成包含块

CSS代码：

.<strong>container</strong>{<br />     <strong>width</strong>: 1000<strong>px</strong>;<br />     <strong>margin</strong>: 50<strong>px auto</strong>;<br />     <strong>border</strong>: 2<strong>px solid </strong><strong>#000000</strong>;<br />     <strong>padding</strong>: 50<strong>px</strong>;<br />     <strong>position</strong>: <strong>relative</strong>;<br /> }<br />.<strong>absolute-div-1</strong>{<br />    <strong>position</strong>: <strong>absolute</strong>;<br />    <strong>left</strong>: 0<strong>px</strong>;<br />    <strong>top</strong>: 0<strong>px</strong>;<br />}

HTML代码：

<<strong>div </strong><strong>class=</strong><strong>"container"</strong>><br />    <<strong>div </strong><strong>class=</strong><strong>"absolute-div-1"</strong>><br />        absolute定位的元素<br />    </<strong>div</strong>><br /></<strong>div</strong>>

效果如下：

可以看到，absolute-div-1的元素是绝对定位，并且定位起点为左侧0px，上部0px，虽然container有50px的padding，但由于绝对定位的元素是根据块容器框的padding edge来定位，所以absolute-div-1还是紧贴左上角显示。

##DEMO 3：绝对定位元素的包含块(2)-行内元素形成包含块

DEMO3中，我们把container换成行内元素span，为了更明显地显示效果，我们给body加了一个高度并且设置了背景色，并且为span和absolute-div-1设置了不同的字体颜色，代码如下

CSS代码：

body{<br />     margin: 0px;<br />     font-size: 14px;<br />     height: 500px;<br />     background: #a0b3d6;<br /> }<br /> .container{<br />     margin: 50px auto;<br />     position: relative;<br />     color: #eeeeee;<br /> }<br />.absolute-div-1{<br />    position: absolute;<br />    color: #ff0000;<br />    left: 0px;<br />    top: 0px;<br />}

HTML代码：

<<strong>span </strong><strong>class=</strong><strong>"container"</strong>><br />    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块<br />     行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含<br />     行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含<br />    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含<br />    <<strong>div </strong><strong>class=</strong><strong>"absolute-div-1"</strong>><br />        absolute定位的元素<br />    </<strong>div</strong>><br /></<strong>span</strong>>

效果：

在IE6/7中效果也相同，另外我们提到过，如果元素是一个行内级元素，那么这个包含块由包围该行内级元素的第一个行框和最后一个行框的box形成。我们来验证标红部分的阐述，即把absolute-div-1的top定位改为bottom，即bottom:0px，效果如下：

这也验证了标准中所阐述的内容。

注：在IE6中，绝对定位元素如果只用bottom定位，但是形成包含块的元素没有触发hasLayout时，bottom不会根据包含块的底部来定位，这个bug通过zoom:1等属性触发hasLayout可以解决。

##DEMO 4：绝对定位元素的包含块(4)-行内元素被分割成多行时

视觉格式化模型中描述过，如果一个行内级元素包含了块级元素，那么这个行内级元素就会被分割成2块，并且都成为了块级元素。我们把DEMO3中的container改动一下：

< span class= "container">

    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块<br />     行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含<br />    <<strong>div </strong><strong>style=</strong><strong>"</strong><strong>background</strong>: <strong>#eeeeee</strong><strong>"</strong>>中间出来了一个div</<strong>div</strong>><br />     <<strong>div </strong><strong>class=</strong><strong>"absolute-div-1"</strong>><br />         absolute定位的元素<br />     </<strong>div</strong>><br />     行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含<br />    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含<br /></<strong>span</strong>>

此时的效果在不同的浏览器中存在差异：IE6+和firefox中的效果为：

而chrome中的效果为：

可以看出，chrome中的绝对定位元素在定位时是基于被分割后形成的第二个框来定位的，而如果我们把绝对定位元素移动到分割元素之前，即：

<<strong>span </strong><strong>class=</strong><strong>"container"</strong>><br />    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块<br />     行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含<br />     <<strong>div </strong><strong>class=</strong><strong>"absolute-div-1"</strong>><br />         absolute定位的元素<br />     </<strong>div</strong>><br />    <<strong>div </strong><strong>style=</strong><strong>"</strong><strong>background</strong>: <strong>#eeeeee</strong><strong>"</strong>>中间出来了一个div</<strong>div</strong>><br />     行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含<br />    行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含块行内级包含<br /></<strong>span</strong>>

那么chrome中的效果就成了：

可见，chrome中的位置是与绝对定位元素在代码中的位置相关的。

##DEMO 5：绝对定位元素的包含块(4)-初始包含块作为包含块

如果一个绝对定位元素找到有非static定位属性的祖先，那么初始包含块就作为其包含块，这里需要注意的是初始化包含块的尺寸问题，2.1节中曾经讲过初始包含块具有视口的尺寸，即使存在滚动时，DEMO代码如下：

CSS代码：为了出现滚动，我们为body加了1000px的高度

.<strong>body-for-demo4</strong>{<br />    <strong>height</strong>:1000<strong>px</strong>;<br />    <strong>background</strong>: <strong>#a0b3d6</strong>;<br />}

.<strong>absolute-div-2</strong>{

    <strong>height</strong>: 100<strong>px</strong>;<br />    <strong>width</strong>: 100<strong>px</strong>;<br />    <strong>background</strong>: <strong>#03a9f4</strong>;<br />    <strong>position</strong>: <strong>absolute</strong>;<br />    <strong>bottom</strong>: 0<strong>px</strong>;<br />    <strong>left</strong>:0<strong>px</strong>;<br />}

HTML代码：

<<strong>body </strong><strong>class=</strong><strong>"body-for-demo4"</strong>><br />    <<strong>div </strong><strong>class=</strong><strong>"absolute-div-2"</strong>><br />    </<strong>div</strong>><br /></<strong>body</strong>>

效果如下：

可以看到，虽然body的高度超出了初始包含块使得滚动条出现，但是初始包含块的尺寸时没有发生改变的。

如果我们把body设置一个position:relative的属性，那么绝对定位框就会跑到页面底部了。

2.4元素定位为fixed时的包含块

元素定位属性为fixed时，对于连续媒体，包含块由视口形成，对于分页媒体，则由页面区域形成。

position为fixed的元素特点是不随页面的滚动而滚动，它的包含块由视口形成，这一点也比较好理解。但是IE6不支持fixed的属性，可以使用css表达式或者hack的方式使IE6支持fixed。可参考：

http://caibaojian.com/468.html

另外CSS2.1标准的原文第10章第1节中也有包含块的示例，标准中的示例更加基础，同样也可以参考。