検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >hasLayout && ブロックの書式設定 Contexts_html/css_WEB-ITnose

hasLayout && ブロックの書式設定 Contexts_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:42:26939ブラウズ

転載元: http://www.smallni.com/haslayout-block-formatting-contexts/

頭の働きが悪いので、hasLayoutとBlock Formatting Contextsのコンタクトシート(以下、 BFC として) を机に貼り付けました (BFC の作成とも言えます)。これら 2 つのことを深く理解しているかどうかはわかりません。いくつかのブラウザでは、いくつかの奇妙なバグも解決されます。今日はそれらを一緒に分析し、その謎のベールを明らかにしましょう。

1.hasLayout

「レイアウト」は、要素のコンテンツの位置とサイズ、他の要素との関係と相互作用、およびアプリケーションとユーザーへの影響を決定する独自の概念です。

  • 概念の説明:
  • 「レイアウト」は特定の CSS プロパティによって不可逆的にトリガーできます、一部の HTML 要素自体にはレイアウトがあります。
  • 「レイアウト」 IE では、hasLayout 属性を使用して、要素にレイアウト (object.currentStyle.hasLayout など) があるかどうかを判断できます。
  • 「レイアウト」は、IE ブラウザ レンダリング エンジンの内部コンポーネントです。 Internet Explorer では、要素は独自のコンテンツを編成してサイズを計算するか、包含ブロックに依存してコンテンツのサイズとサイズを計算します。これら 2 つのメソッド間の矛盾を調整するために、レンダリング エンジンは true または false の「hasLayout」属性を使用します。 要素の「hasLayout」属性値が true の場合、その要素にはレイアウト (レイアウト) があると言います。つまり、hasLayout が正常にトリガーされます
  • トリガー方法:
  • デフォルトのレイアウトを持つ要素: 
    <html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee>
  • hasLayoutトリガーできる CSS 機能: 
    display: inline-block         /*ALL*/height: (除 auto 外任何值)    /*仅适用IE6 7*/width: (除 auto 外任何值)     /*仅适用IE6 7*/float: (left 或 right)       /*ALL*/position: absolute           /*ALL*/writing-mode: tb-rl          /*ALL*/zoom: (除 normal 外任意值)    /*仅适用IE6 7*/
  • IE7 hasLayout をトリガーできる追加の属性 (不完全なリスト) がいくつかあります: 
    min-height: (任意值)/*以下适用IE7+*/min-width: (任意值)max-height: (除 none 外任意值)max-width: (除 none 外任意值)overflow: (除 visible 外任意值，仅用于块级元素)overflow-x: (除 visible 外任意值，仅用于块级元素)overflow-y: (除 visible 外任意值，仅用于块级元素)position: fixed
  • IE6 の以前のバージョン (IE6 とそれ以降のすべてのバージョンの混合モードも含まれます。実際、この混合モードはIE 5.5 と同等)、hasLayout は任意の要素の「幅」または「高さ」(非自動) を設定することでトリガーできますが、IE6 の標準モードではインライン要素では機能しません。 IE7。「display:inline-block」の設定のみが機能します。

    • 2.ブロック フォーマット コンテキスト (BFC)

    IE には独自の hasLayout 属性がありますが、IE 以外のブラウザではどうなるでしょうか? IE 以外のブラウザは BFC (ブロック フォーマット コンテキスト) を使用します

  • 概念の説明:
  • BFC は W3C CSS 2.1 仕様の概念であり、要素がそのコンテンツをどのように配置し、他の要素とどのように相互作用するかを決定します。 。
  • BFCが作成された要素には、その子要素が次々と配置されます。それらの垂直方向の開始点は、それを含むブロックの上部であり、2 つの隣接する要素間の垂直方向の距離は、「margin」プロパティによって決定されます。 BFC では、隣接するブロックレベル要素の垂直マージンが崩れます。
  • BFC では、たとえ float が存在しても (ただし、この要素が新しい BFC も作成しない限り、要素は float) 圧縮の影響を受けます。
  • CSS3 では、この概念が変更されました: http://www.w3.org/TR/css3-box/#block-level0 CSS3 では、BFC はフロー ルートと呼ばれます。
  • トリガーメソッド 
    float:(任何值除了none)overflow:（任何值除了visible）display:(table-cell/table-caption/inline-block)position:(任何值除了static/relative)

    • ヒント: 要素のブロック書式設定コンテキストがトリガーされるため、フロートをクリアするために overflow:hidden メソッドを使用することがあります (IE6 7 ではズームを 1 にする必要があります)。このメソッドは確かに単純ですが、非常に暴力的です。 -#

    3. hasLayout と BFC の特徴

    3.1 hasLayout をトリガーする要素と BFC を作成する要素のうち、浮動要素は高さの計算に参加します

    ケース 1: ブロックレベルの非置換要素BFC を作成しない、Triggered IE の hasLayout。

    次のコードを分析します: 

    <div style="width:300px;">    <div id="Container" style="background:silver; zoom:1;">        <span id="SPAN1" style="background:gray;">simple text</span>        <div id="DIV1" style="width:150px; height:50px; background:dimgray;">in flow</div>        <div id="DIV2" style="float:left; background:gold;">float:left</div>    </div></div>

  • コンテナ ブロック書式設定コンテキストは作成されません。
  • Container の 'zoom:1' 設定は、IE で hasLayout をトリガーするためのものであり、
  • Container の高さの値はデフォルトの 'visible' です。 SPAN1
    • はインライン要素、
  • DIV1 は通常のフローのブロック要素です。 DIV2
    • は
  • float ブロックレベル要素です。 CSS2.1 仕様のセクション 10.6.3 の高さ計算ルールに従って、通常のフローでブロックレベルの非置換要素の高さを計算する場合、浮動子要素は計算に参加しません。
    • そのため、

    Container

    の高さを計算するとき、それは

    SPAN1とDIV1の2つの高さの合計である必要があるため、最後の銀色の部分には金色の部分が含まれるべきではありません。 このコードは、さまざまなブラウザ環境で次のように動作します:

    IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera

    去掉 Container 的 ‘zoom:1′ 后，各浏览器表现一致：

    可见，IE 浏览器中，触发 hasLayout 的元素在进行高度计算的时候，其浮动的子元素也会参与运算。

    情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。

    分析以下代码：

    <div style="width:300px;">    <div id="Container" style="background:silver; overflow:hidden;">        <span id="SPAN1" style="background:gray;">simple text</span>        <div id="DIV1" style="width:150px; height:50px; background:dimgray;">in flow</div>        <div id="DIV2" style="float:left; background:gold;">float:left</div>    </div></div>
  • Container 的 ‘overflow:hidden;’ 创建了BFC；
  • Container 的 ‘overflow:hidden;’，在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout；
  • Container 的高度值为 ‘auto’；
  • SPAN1 是一个行内元素，DIV1 是一个处于普通流中的块元素；
  • DIV2 是一个浮动的块级元素。

    • 根据 CSS2.1 规范第10.6.7部分的高度计算规则，在计算生成了 BFC的元素的高度时，其浮动子元素应该参与计算。

    所以，在进行 Container 高度计算时，DIV2 也应该参与计算，所以最终银色部分应该包含金色的部分。

    这段代码在不同的浏览器环境中表现如下：( 注意 IE7(S) 此时触发了 hasLayout )

    IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera

    可见，只要 Container 创建了 BFC，其浮动子元素就会参与其高度计算（IE7(S) 是由于 hasLayout 导致与其他浏览器的效果相同）。

    3.2 与浮动元素相邻的、触发了 hasLayout 的元素或创建了 BFC 的元素，都不能与浮动元素相互覆盖

    如果浮动元素的两侧有足够的空间放置该元素，则元素会紧邻浮动元素放置，必要时，该元素的宽度将会被压缩。否则它们可 能会定位到浮动元素的下方。

    情况1：没有创建 BFC 的块级非替换元素，触发了 IE 的 hasLayout。

    分析以下代码：

    <div id="Container" style="border:2px solid gold; width:300px; height:150px;<strong> background:url("grid2a.png") repeat;</strong>">    <div id="DIV1" style=" width:100px; height:100px; float:left; filter:alpha(opacity=50); opacity: 0.5;">        Float Block    </div>    <div id="DIV2" style=" zoom:1;">        If I had a single flower for every time I think about you, I could walk forever in my garden.    </div></div>
  • DIV1 是一个浮动元素，背景是 50% 的透明
  • DIV2 的 ‘zoom:1′ 触发了 IE 中的 hasLayout。

    • 其中，grid2a.png 背景是 100px * 100px 的图片：

    根据 CSS 2.1 9.5 Floats 中的描述，浮动元素会覆盖普通流中的块容器。所以，DIV2 应该有一部分呢被 DIV1 覆盖。

    这段代码在不同的浏览器环境中表现如下：(忽略 IE 中 3px BUG 的影响)

    IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera

    情况2：创建了 BFC的块级非替换元素，未触发 IE 的 hasLayout。

    分析以下代码：

    <div id="Container" style="border:2px solid gold; width:300px; height:150px;<strong> background:url("grid2a.png") repeat;</strong>">    <div id="DIV1" style=" width:100px; height:100px; float:left; filter:alpha(opacity=50); opacity: 0.5;">        Float Block    </div>    <div id="DIV2" style=" overflow:hidden;">        If I had a single flower for every time I think about you, I could walk forever in my garden.    </div></div>
  • DIV1 是一个浮动元素，背景是50%的透明
  • DIV2 的 ‘overflow:hidden;’ 在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout。

    • 根据 CSS 2.1 9.5 Floats 中的描述，创建了BFC的元素不能与浮动元素重叠， 所以，DIV2 应该有一部分被 DIV1 覆盖。

    这段代码在不同的浏览器环境中表现如下：( 注意 IE7(S) 此时触发了 hasLayout )

    IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera

     

    3.3 触发 hasLayout 的元素和创建了 BFC的元素不会与它们的子元素发生外边距折叠

    情况1：没有生成BFC的块级非替换元素，触发了 IE 的 hasLayout。

    分析以下代码：

    <div id="Container" style="width:300px; border:1px solid gold;">    <div id="DIV1" style="zoom:1; background:darkgray;">        <div id="DIV2" style="margin:30px 0; width:60px;">content</div>    </div></div>
  • Container 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。
  • DIV1 的宽度没有设置，所以宽度等于 Container 的宽度。
  • DIV1 的高度也没有设置，所以其高度取决于其内容的高度。
  • DIV1 设置了 ‘zoom:1’，在 IE 中触发了 hasLayout。

    • 根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。

    DIV1 和 DIV2 应该发生空白边折叠，深灰色的 DIV1 应该刚好包含 ‘content’ 文本。

    这段代码在不同的浏览器环境中表现如下：

    IE6 IE7 IE8(Q) IE8(S) Firefox Chrome Safari Opera

    可见，在 IE 中，触发 hasLayout 的元素，阻止了它自身与子元素间的空白边折叠。

    情况2：生成 BFC的块级非替换元素，未触发 IE 的 hasLayout。

    分析以下代码：

    <div id="Container" style="width:300px; border:1px solid gold;">    <div id="DIV1" style="overflow:hidden; background:darkgray;">        <div id="DIV2" style="margin:30px 0; width:60px;">content</div>    </div></div>
  • Container 是宽度为300px，含有 border 的块元素，根据标准，它不会与子元素的 margin 发生空白边折叠。
  • DIV1 的宽度没有设置，所以宽度等于 Container 的宽度。
  • DIV1 的高度也没有设置，所以其高度取决于其内容的高度。
  • DIV1 设置了 ‘overflow:hidden’，在 IE6 中未触发 hasLayout，但在 IE7(S) 中触发了 hasLayout。

    • 根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成BFC 的元素不会和在流中的子元素发生空白边折叠。

    DIV1 和 DIV2 不应该发生空白边折叠，深灰色的 DIV1 应该撑满 Container 。

    这段代码在不同的浏览器环境中表现如下：( 注意IE7(S) 此时触发了 hasLayout )

    IE6 IE7(Q) IE8(Q) IE7(S) IE8(S) Firefox Chrome Safari Opera

    IE では、BFC が作成され、hasLayout がトリガーされない場合でも、IE とその子要素の間で空白エッジの崩壊が発生することがわかります。

    hasLayout と BFC の類似点、相違点、および考えられる問題

  • 相違点
  • IE8(S) より前のバージョンでは、仕様に記載されているブロック書式設定コンテキストとインライン書式設定コンテキストの概念はありませんが、hasLayout は同様の目的を達成するために使用されます。
  • IE では、「width」、「height」、「min-width」、「min-height」、「max-width」、「max-height」、「zoom」、「writing-mode」を設定できます。 hasLayout であり、これらの属性値を設定しても、要素が BFC を作成できるようにはなりません。
  • IPUNT、BUTTON、SELECT、TEXTAREA など、IE の多くの要素にはデフォルトでレイアウトがありますが、これらの要素は標準でインライン書式設定コンテキストを形成します (このブログで後ほど紹介します)。
  • それらの共通点
  • どちらも、コンテンツの位置とサイズを決定する方法を決定するルールです。
  • 両方とも、他の要素との相互作用のルールを決定します。
  • 「table-cell」と「table-caption」は両方とも hasLayout の要素であり、BFC を作成できる要素です。
  • 浮動要素、絶対配置要素、インラインブロック要素、および「visible」以外の値を持つオーバーフロー (IE7) は、IE で hasLayout をトリガーでき、標準では BFC を作成できます。
  • 考えられる互換性の問題:
  • hasLayout と BFC は同じ種類のものに対する異なる理解であり、それらの有効化条件が異なるため、要素が設計されている場合、以前のバージョンの IE では hasLayout がトリガーされますが、BFC は作成されません他のブラウザでは、または逆に、以前のバージョンの IE では要素が hasLayout をトリガーしませんが、他のブラウザでは BFC が作成されるため (「overflow:hidden」が設定されている場合など)、ページ レイアウトの違いに大きな変更が生じます。

    • 解決策

    上記の問題は、要素が以前のバージョンの IE で hasLayout をトリガーし、他のブラウザで BFC を作成する場合にのみ回避できます。つまり、上記の両方を有効にしてブラウザ間の互換性を確保するか、逆に両方を無効にします。

    1. 要素に BFC を生成させ、hasLayout をトリガーさせます
    2. hasLayout をトリガーする要素の場合は、CSS を通じて BFC を生成するように設定します
    3. BFC を生成するが hasLayout をトリガーしない要素の場合は、「zoom:1」を設定します, hasLayoutをトリガーにします。
    4. そのため、要素は hasLayout をトリガーせず、BFC を作成しません。

    この記事の内容の一部は、完全に W3Help (武利剑) から引用しています:

    http://www.w3.org/TR/CSS21/visuren.html#block。 -書式設定

    http://reference.sitepoint.com/css/haslayout

    http://blog.csdn.net/pengju_guo/article/details/6945436

    http://www.qianduan.net/comprehensive- haslayout.html

    声明：
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    前の記事：ファイルupload_html/css_WEB-ITnoseを実装するためのHTMLフォームのちょっとした基礎知識次の記事：ファイルupload_html/css_WEB-ITnoseを実装するためのHTMLフォームのちょっとした基礎知識

    関連記事

    続きを見る