CSS:要素の高さと幅に関する考察 連載記事(3)_html/css_WEB-ITnose

はじめに

CSS に関する一連の記事 (1): 要素の高さと幅の議論 では、さまざまな状況下での display: block を使用した非置換要素の幅と高さのパフォーマンスについて議論しました。厳密ではないので、追加する前に、CSS ボックス モデルと、ビジュアル フォーマット モデルのレイアウトで管理されるボックスを含むいくつかの重要な点を簡単に紹介します。

CSS ボックス モデルは、ドキュメント ツリー内の要素に対して生成され、視覚的な書式設定モデルに従ってレイアウトされる長方形のボックスを記述します。

ビジュアル フォーマット モデルでは、ドキュメント ツリー内の各要素は、ボックス モデルに従って 0 個以上の

ボックスを生成します。これらのボックスのレイアウトは、

ボックスのサイズとタイプによって制御されます。

• 位置。スキーム (通常のフロー、浮動小数点、および絶対位置決め)。

• ドキュメント ツリー内の要素間の関係。

• 外部情報 (例: ビューポート サイズ、画像の固有の寸法など)。
ビジュアルフォーマットモデルでは、各要素はボックスモデルに従ってドキュメントツリー内に0個以上のボックスを生成します。これらのボックスのレイアウトは、次の要素によって管理されます

ボックスのサイズとタイプ

• 配置スキーム (通常のフロー、フローティング、絶対配置)

• ドキュメント ツリー内の要素間の関係

• 外部情報 (たとえば、ビューポート サイズ、画像の本質的なサイズなど)

• それでは、次に説明するのはボックスのサイズです。

包含ブロック(containing block)

概要

CSS 2.1 では、多くのボックスの位置とサイズが包含ブロックと呼ばれる長方形のボックスの辺を基準に計算されます。一般に、生成されたボックスは > として機能します。子孫ボックスの包含ブロック。ボックスはその子孫の包含ブロックを「確立」すると言います。「ボックスの包含ブロック」という表現は、ボックスが存在するブロックではなく、「包含ブロック」を意味します。生成されます。

各ボックスには、その包含ブロックに対する位置が与えられますが、この包含ブロックによって制限されず、オーバーフローする可能性があります。

CSS2.1 では、包含ブロックの位置とサイズ長方形のボックスの端を基準にして計算されます。通常、結果のボックスは、その子孫のボックスの包含ブロックとして機能します。ボックス (ボックス) は、その子孫の包含ブロックを確立するものと考えられます。 「ボックス (ボックス) の包含ブロック」と言う場合、それが生成する包含ブロックではなく、「ボックスが配置されている包含​​ブロック」を意味します。

各ボックスは、そのボックスを含むブロックに対して相対的に配置されますが、そのボックスが含まれるブロックに限定されず、オーバーフローする可能性があります。

定義

ルート要素が存在する包含ブロックは、初期包含ブロックと呼ばれる長方形であり、連続メディアの場合は、ビューポートの寸法を持ち、キャンバスの原点に固定されます。これは、ページ化されたメディアのページ領域です。初期包含ブロックの「方向」プロパティは、ルート要素の場合と同じです。

ルート要素が配置される包含ブロックは、初期包含ブロックと呼ばれる長方形のボックスです (ルート要素は、私たちが一般的に使用するブラウザ環境では、原点がキャンバスと一致し、サイズが

ビューポート

と同じである四角形を指します。

• 他の要素の場合、要素の位置が「相対」または「静的」の場合、包含ブロックは最も近いブロック コンテナの祖先ボックスのコンテンツ エッジによって形成されます。

他の要素の場合、 element 位置属性値は相対または静的 (要素はドキュメント フロー内にあります) であり、その要素を含むブロックは、祖先要素内の最も近い

ブロック コンテナ ボックス

の

コンテンツ ボックス

(マージン、ボーダー、パディングを除く領域) です。 )；

• 要素に 'position:fixed' がある場合、包含ブロックは連続メディアの場合はビューポートによって、ページ メディアの場合はページ領域によって確立されます。

要素の場合位置の値は固定されており、含まれるブロックはビューポートによって確立されます

viewport

• 要素に 'position: ABSOLUTE' がある場合、含まれるブロックは 'position' が 'absolute' である最も近い祖先によって確立されます'、'relative'、または 'fixed'、次の方法:

  1。祖先がインライン要素である場合、その要素を含むブロックは、CSS 2.1 でその要素に対して生成された最初と最後のインライン ボックスの周囲の境界ボックスです。複数の行にまたがる場合、包含ブロックは未定義です
  2。それ以外の場合、包含ブロックは祖先のパディングエッジによって形成されます
  そのような祖先が存在しない場合、包含ブロックは最初の包含ブロックになります。

  • 要素の位置値が絶対値である場合、その要素を含むブロックは、次のように位置値が
    絶対、相対、固定である最も近い祖先要素 (オフセット親) によって確立されます
    1.祖先が For の場合インライン要素の場合、包含ブロックは、祖先要素によって生成された最初と最後のインライン ボックスのパディング ボックス (マージンと境界線を除く領域) を含むことができる最小の四角形です。それ以外の場合は、この祖先要素の
    パディングボックス フォーム

    そのような祖先要素がない場合、包含ブロックは最初の包含ブロックになります
  チェスト
  包含ボックスについての上記の紹介によれば、包含ブロックを大きなボックスとして扱うことができます, ボックス 中に入れる小さなボックスがたくさんあります。小さなボックスの置き方は大きなボックスによって異なります。小さなボックスが異なると、大きなボックスの初期位置も異なります。これを説明するために、簡単な栗を示します。ボックスの位置はデフォルトでは静的で、その

  を含むブロック

  は最も近い祖先要素の

  コンテンツボックス

  であるため、その開始位置はラップの

  コンテンツボックス

  の左上隅

  に位置します。
  : 内部位置の値が絶対、top:0、left:0 に設定され、ラップ値が相対に設定されている場合、内部を含むブロックはそのオフセット親であるため、 padding-box の原点になります。内側の位置は、wrap の

  padding-box

  の左上隅です。
  考察: 上記の例を通して、含有ボックスが要素ごとに異なることをより直観的に感じることができます。同じことが、含有ボックスが異なるため、高さと幅の継承の計算にも当てはまります。前回の 2 つの記事では、一般的に xxx の幅または高さは xxx の親または子のコンテンツの幅と等しいと言われていたため、この記述は厳密ではありません。 1. この例の祖先要素には content-box のみが含まれているため、異なる要素の containing-box は異なります。一部はその祖先要素の 1 つのパディングボックスであり、一部はパディングボックスです。したがって、要素の高さと幅の継承は、単純に考えるのではなく、要素の containing-box

  の値の計算を継承することを意味すると思います。親要素はその親要素を含むブロックではないか、親要素が含まれるブロックは親要素の一部にすぎないため、以下は以前に書いた記事にいくつかの追加を加えま​​す。

  
  注意: 最初の記事の内容は概ね正しいので、最初の記事を理解してからこの記事を読むとよいでしょう。また、最初の 2 章ではこの記事の目的が不十分であると考えられます。内容に間違いがありましたらご指摘ください(^_^)。 要素の高さと幅についての補足 以下の例では、htmlの構造は上記の例と同じです。 以下にhtmlの構造は記述しません。 ドキュメント フロー内の要素は、位置の値が静的または相対であることを意味します 要素の幅と高さは 100% です

  1 要素がドキュメント フロー内にあるか、要素が浮動要素であることを意味します

   <div id="wrap">        <div id="inner"></div> </div> 

  プラス float が左または右に等しい場合、効果は上の図と同じになります 結論 1: 要素がドキュメント フロー内にある場合、または浮動要素である場合、要素の幅と高さが コンテンツになります
  祖先要素の中で最も近いブロックコンテナボックスのbox、つまり、その
  を含むブロックの幅と高さを継承します。

  
  2. 要素の位置の値は絶対です

  上記CSSのinnerにposition:absoluteを追加し、wrapにposition:relativeを追加します。 効果は以下の通りです

  innerは位置の値を設定していないため、設定した位置の値もオフセット親のパディングボックスを基準にして位置が表示される場合は、上記の説明を参照してください。

  
  結論 2

  : 要素の位置の値が絶対値である場合、要素の幅と高さは、その

  祖先要素の中で最も近いオフセット親の パディング ボックス、つまり、要素の幅と高さになります。それを継承するブロックを含む。 3. 要素の位置の値は固定です 上記CSSのinnerにpositionを追加します

  innerは位置の値を設定していないため、図のように位置が表示されます。

  
  結論 3
  : 要素の位置の値が固定されている場合、要素の幅と高さは、それを含むブロック ビューポートの幅と高さになります。

  元素不设宽度

  1.元素在文档流中

  #wrap {    width: 100px;    height: 40px;    padding: 10px;    border: 2px dashed #333;    margin: 10px;    background: orange;}#inner {    height: 10px;    background: #ccc;}

  
  结论1：当元素在文档流时,元素的宽度为其祖先元素中最近的 block container box(块容器盒)的content box,也就是继承它的包含块的宽度 。

  2.元素不在文档流中

  结论2：如文章一中的结论一样,元素宽度等于其内容所占空间,同样的在文章一中,也得出了元素不设高度,元素的高度为其内容所占据空间,若没有内容,则高度为0。

  思考:那么由此我们可以引发我们的又一思考,在元素不设高度或者宽度的情况下,当元素的子代的position scheme不同的情况下,元素的宽度又是如何变化的？

  元素宽度或高度由内容决定

  接下来我就不举栗子了,直接给出结论

  高度宽度都由内容决定

  元素不设宽度且元素不在文档流中，元素宽度为内容宽度
  元素不设高度，元素高度等于内容高度

• 元素不在文档流中

• 当子元素都为普通流中元素时,元素宽度为子元素中宽度最大的元素，高度为子元素高度之和（子元素单个计算：子元素高度 +　子元素padding + 子元素border + 子元素margin）

• 当子元素都为浮动元素时,元素宽度为子元素宽度之和，高度为子元素中高度最大的元素

• 当子元素都为绝对定位或者固定定位元素时，元素宽度和高度都为0

只有高度由内容决定

元素不设宽度且元素在文档流中，元素宽度为其祖先元素中最近的 block container box(块容器盒) 的 content box
元素不设高度，元素高度等于内容高度

2.元素在文档流中

• 当子元素都为普通流中元素，高度为子元素高度之和(子元素单个计算：子元素高度＋子元素padding+子元素border)(边距折叠)

• 当子元素不在文档流中，元素高度为0

总结

1.当元素继承其祖先元素的宽高度时,元素的宽高度为其containing-box的高宽度
2.当元素的宽度或者高度等于其内容的宽度或者高度时,如上得出的结论