hasLayout && ブロックの書式設定 Contexts_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:42 AM

転載元: 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  alt="hasLayout && ブロックの書式設定 Contexts_html/css_WEB-ITnose" ><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 を作成する場合にのみ回避できます。つまり、上記の両方を有効にしてブラウザ間の互換性を確保するか、逆に両方を無効にします。

要素に BFC を生成させ、hasLayout をトリガーさせます
hasLayout をトリガーする要素の場合は、CSS を通じて BFC を生成するように設定します
BFC を生成するが hasLayout をトリガーしない要素の場合は、「zoom:1」を設定します, hasLayoutをトリガーにします。
そのため、要素は 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 までご連絡ください。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、