CSS3 包含ブロックとその配置の決定_html/css_WEB-ITnose

レイアウトについては毎回混乱するので、非常に詳細な記事をインターネットで見つけました。元の記事のリンクを再投稿しました: http://w3help.org/zh-cn/kb/ 008.html

包含ブロックの概要

CSS2.1 では、多くのボックスの位置とサイズの計算は長方形の境界に依存します。この長方形は包含ブロックと呼ばれます。 一般に、(要素) によって生成されたボックスは、その子孫要素の包含ブロックの役割を果たします。「(要素の) ボックスは、その子孫ノードの包含ブロックを構築します」と言えます。包含ブロックは相対的な概念です。

<div>    <table>        <tr>            <td>hi</td>        </tr>    </table></div>

上記のコードを例にとると、DIV と TABLE は両方ともブロックを含んでいます。 DIV は TABLE を含むブロックであり、TABLE は TD を含むブロックですが、これは絶対的なものではありません。

「ボックスの包含ブロック」とは、ボックスが構築された包含ブロックではなく、「ボックスが存在する包含ブロック」を指します。たとえば、上記のコードでは、TABLE の包含ブロックは、TABLE 自体によって作成された包含ブロックではなく、DIV によって作成された包含ブロックを参照します。 TABLE によって構築される包含ブロックを TD の包含ブロックと呼ぶことができます。

すべてのボックスは、その包含ブロックに対して相対的な位置を持ちますが、包含ブロックによって境界付けられることはなく、オーバーフローする可能性があります (包含ブロック)。包含ブロックに「overflow」属性を設定して、オーバーフローした子孫要素を処理できます。

ブロックを含むという概念は非常に重要です。なぜなら、自動幅と高さの値の計算、フローティング要素の位置決め、絶対に配置された要素の位置決めなど、ビジュアル フォーマット モデルの多くの理論的知識がこの概念に関連しているからです。 。含まれているブロックを理解していないと、それに基づいてその後の理論を理解することができません。

包含ブロックの決定とその範囲

上記からわかるように、要素ボックスの位置とサイズはその包含ブロックに関連しており、要素はその子孫要素の包含ブロックを作成します。

つまり、要素を含むブロックがその親要素であるということですか?ブロックを含む領域は親要素のコンテンツ領域ですか？ 答えは否定的です。ここでは、各種要素にブロックが含まれるかどうかの判定と、ブロックが含まれる領域の範囲について説明します。 基準を満たす祖先要素がない場合、その要素の包含ブロックが最初の包含ブロックになります。

包含ブロックの決定の全体的なフローチャートは次のとおりです:

ルート要素

ルート要素は、ドキュメント ツリーの最上位の要素です。親ノードはありません。

ルート要素が存在する包含ブロックを初期包含ブロックと呼びます。具体的には、クライアントによって異なります。

(X)HTML では、ルート要素は html 要素です (ただし、ブラウザーによっては body 要素が誤って使用されます)。

最初の包含ブロックの方向属性はルート要素と同じです。

静的に配置された要素と相対的に配置された要素

要素の位置が「相対」(相対配置) または「静的」(静的配置) の場合、その要素を含むブロックは、最も近いブロック レベルであるセル (テーブル セル) によって決定されます。または inline-block (inline-block) の祖先要素のコンテンツ ボックス 1 が作成されます。

要素が「position」属性を宣言していない場合、「position」のデフォルト値は「static」になります。

<table id="table1">  <tr>      <td id="td1">          <div id="div1" style="padding:20px;border:1px solid red;">               <span>                   <strong id=”greed” style="position:relative;">greed is</strong>                   good 999999              </span>          </div>      </td>  </tr></table>

包含ブロック関係テーブル:

要素包含ブロック

table1 body
td1 table1
div1 td1
greed div1
SPAN div1内の要素に含まれるテキストの位置がわかる、包含ブロックの領域div1 によって作成されたものです。コンテンツ境界は内部境界です。

固定位置要素

要素が固定位置 (「position:fixed」) 要素の場合、その要素を含むブロックは現在のビジュアル ウィンドウ 2 になります。

絶対配置要素

一般に、絶対配置 (「position:Absolute」) 要素を含むブロックは、「absolute」、「relative」、または「fixed」の 'position' 属性を持つ最も近い祖先要素から作成されます。 。

その祖先要素がインライン要素の場合、それを含むブロックはその祖先要素の ‘direction’ 属性に依存します

<p style="border:1px solid red; width:200px; padding:20px;">    T    <span style="background-color:#C0C0C0; position:relative;">            这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。            <em style="position:absolute; color:red; top:0; left:0;">XX</em>            <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>            <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>    </span></p>

上記のコードでは、テキストはデフォルトで左から右に配置されます。赤 XX、青 XX、黄 XX はすべて絶対配置要素であり、それらを含むブロックは相対配置 SPAN です。 標準によれば、それらの位置は、包含ブロックを参照する必要があります。その包含ブロックの左上端は、SPAN によって形成される最初のボックスの上端と左端のパディング端 (つまり、最初の行の灰色の部分) です。含まれているブロックの右と左のパディング境界は次のとおりです。 以下は、SPAN によって生成された最後のボックスの右と下のパディング境界 (最後の行の灰色の部分) です。

inline 要素内で形成される包含ブロックはブラウザごとに異なり、互換性の問題があります。これは上記の例で証明できます。青い「○○」の位置はブラウザごとに異なります。

含まれるブロックの幅は負の値になる可能性があります。

サンプルコード:

<p style="border:1px solid red; width:200px; padding:20px;">    TEXT TEXT TEXT    <span style="background-color:#C0C0C0; position:relative;">        这段文字从左向右排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们包含块的边缘。        <em style="position:absolute; color:red; top:0; left:0;">XX</em>        <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>    </span></p>

上記の境界は領域を囲むことができません。その場合、包含ブロックの幅は負になります。

2) 'direction' が 'rtl' の場合、包含ブロックの上端と右側は祖先要素によって生成された最初のボックスの上端と右端のパディング エッジであり、左端と下端は親要素によって生成されます。最後のボックスの左と下のパディングエッジ

サンプルコード:

<p style="border:1px solid red; width:200px; padding:20px; direction:rtl;">    T    <span style="background-color:#C0C0C0; position:relative;">         这段文字从右向左排列，红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素，它的包含块是相对定位的SPAN。可以通过它们绝对定位的位置来判断它们……        <em style="position:absolute; color:red; top:0; left:0;">XX</em>        <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>    </span></p>

其他情况下，如果祖先元素不是行内元素，那么包含块的区域应该是祖先元素的内边距边界