hasLayout とブロックの書式設定コンテキストについて学ぶ (パート 1)_html/css_WEB-ITnose
hasLayout とブロックの書式設定コンテキストを学習します
@(css BFC)[IE hasLayout|Miaotong]
hasLayout とは何ですか?
haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout属性值为true时，我们说这个元素有一个布局（layout）。注意：hasLayout属性是微软特有的过时属性，在IE8、IE9中，hasLayout属性已经被废弃。下文中的InternetExplorer都是指IE7、IE6及以下版本。
要素にレイアウトがある場合、その要素はそれ自体と、可能な子孫要素のサイズと位置を決定します。簡単に言えば、これは、要素がこの作業を行うために祖先要素に依存するのではなく、要素自体とそのコンテンツを維持するためにより多くの時間を費やす必要があることを意味します。したがって、一部の要素にはデフォルトでレイアウトが設定されます。要素が「レイアウトを持つ」または「レイアウトを取得する」、あるいは要素が「レイアウトを持つ」と言うときは、その Microsoft 固有のプロパティ hasLayout が true に設定されていることを意味します。 「レイアウト要素」は、デフォルトでレイアウトを持つ要素、または特定の CSS プロパティを設定することによってレイアウトを持つ要素です。 IE の HTML 要素に haslayout があるかどうかは、IE Developer Toolbar で確認できます。IE Developer Toolbar では、通常、haslayout を持つ要素は「haslayout = -1」として表示されます。 「レイアウト」 IE では、hasLayout 属性を使用して、要素にレイアウトがあるかどうかを判断できます (object.currentStyle.hasLayout など)。
独自のコンテンツの整理を担当する要素にはデフォルトでレイアウトがあり、主に次の要素 (不完全なリスト) が含まれます:
<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <button>, <select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee>对于并非所有的元素都默认有布局，微软给出的主要原因是“性能和简洁”。如果所有的元素都默认有布局，会对性能和内存使用上产生有害的影响。http://www.satzansatz.de/cssd/onhavinglayoutrev07-20060517.html
haslayout デバッグと問題の解決
IE で Web ページが異常な動作をする場合、 haslayout をアクティブにして、それが問題かどうかを確認してください。一般的な方法は、特定の要素の CSS にzoom:1を設定することです。ほとんどの場合、既存の環境に影響を与えることなく要素の haslayout を起動するため、Zoom:1 が使用されます。問題が解消されれば、基本的には haslayout が原因であると判断できます。その後、対応する CSS プロパティを設定することでこの問題を修正できます。最初に要素の幅/高さの属性を設定してから、他の属性を検討することをお勧めします。
IE6 以前のバージョンの場合、一般的な方法は Holly hack と呼ばれ、この要素の高さを 1% (height:1%;) に設定します。この要素のオーバーフロー プロパティが可視に設定されている場合、このメソッドは機能しないことに注意してください。または、IE の条件付きコメントを使用します。
IE7 の場合、最良の方法は、要素の最小の高さを 0 (min-height:0;) に設定することです。
haslayout の問題によって引き起こされる一般的なバグ
IE6 以前のバージョンでのダブルマージンフローティングバグ
バグ修正: display:inline;
IE5-6/win の 3 ピクセルオフセットバグ
バグ修正: height:1%;
IE6 Peek-a -boo バグ
バグ修正: 高さ:1%;
IE6/7 マイナスマージン非表示バグ:
バグ修正: 親要素の hasLayout を削除するか、子要素に hasLayout を割り当てて位置 :relative; を追加します
方法haslayoutを有効にするには?
ほとんどの IE 表示エラーは、要素の haslayout 属性をアクティブにすることで修正できます。 cssのsize属性(幅/高さ)などを設定することで要素のhaslayoutを有効にし、「レイアウトを持つ」ようにすることができます。以下に示すように、次の CSS プロパティを設定するだけです。
Internet Explorer 7 には追加のプロパティがいくつかあります (完全なリストではありません):
ここで、overflow-x と overflow-y はCSS3 ボックス モデルのプロパティであり、ブラウザーではまだ広くサポートされていません。
インライン要素 (デフォルトは、span などのインライン要素、または display:inline; を持つ要素) の場合、
width と height のみが IE5.x および IE6 以降のバージョンの quirks モードで hasLayout をトリガーします。 IE6 の場合、ブラウザーが標準互換モードで実行されている場合、インライン要素は幅または高さの属性を無視するため、この場合、幅または高さを設定しても要素にレイアウトを指定することはできません。
zoom はいつでも hasLayout をトリガーできますが、IE5.0 ではサポートされていません。
「layout」を持つ要素が表示される場合: inline 同時に、その動作は標準で言及されている inline-block と非常によく似ています: 通常のテキストのように段落内で水平方向に連続して配置され、vertical-align の影響を受けます。コンテンツに応じてサイズを適応的に調整できます。これは、IE/Win だけでは、インライン要素にブロック レベルの要素を含めることができる理由も説明できます。これは、他のブラウザでは、IE/Win とは異なり、display: inline はインラインを意味し、インライン要素にレイアウトが作成されると、その後もレイアウトが保持されるためです。レイアウトはインラインブロックになります。
ブロックフォーマットコンテキストとは何ですか?
この記事は、W3C CSS 2.1 仕様のビジュアル フォーマット モデルについて言及しています
http://www.w3.org/TR/CSS2/
http://www.w3.org/TR/CSS2/visuren.html#inline- level
http://www.w3.org/TR/CSS2/visuren.html#normal-flow
Box: CSSレイアウトの基本単位
BoxはCSSレイアウトのオブジェクトであり基本単位です。ページは多くのボックスで構成されています。要素のタイプと表示属性によって、このボックスのタイプが決まります。 さまざまなタイプのボックスがさまざまなフォーマット コンテキスト (ドキュメントのレンダリング方法を決定するコンテナ) に参加するため、ボックス内の要素はさまざまな方法でレンダリングされます。どのようなボックスがあるかを見てみましょう:
ブロックレベルのボックス: ブロック、リスト項目、テーブルの表示属性を持つ要素は、ブロックレベルのボックスを生成します。そして、ブロックの書式設定コンテキストに参加します。
inline-level box: inline、inline-block、および inline-table の表示属性を持つ要素は、インライン レベルのボックスを生成します。そして、インライン書式設定コンテキストに参加します。
実行ボックス: css3 でのみ利用可能です。今は説明しません。 http://www.w3.org/TR/css3-box/#run-in-boxes
Formatting context
Formatting contextは、W3C CSS2.1仕様における概念です。これはページ上のレンダリング領域であり、そのサブ要素がどのように配置されるか、および他の要素との関係や相互作用を決定する一連のレンダリング ルールがあります。最も一般的な書式設定コンテキストは、ブロック書式設定コンテキスト (略して BFC) とインライン書式設定コンテキスト (略して IFC) です。
CSS2.1ではBFCとIFCしかなく、CSS3ではGFCとFFCも追加されました。
BFC定義
BFC（Block formatting contexts）とは、直訳すると「ブロックレベルの書式設定コンテキスト」となります。これは、ブロックレベルボックスのみが参加する独立したレンダリング領域であり、内部のブロックレベルボックスがどのようにレイアウトされるかを規定し、この領域の外側とは何の関係もありません。
BFCレイアウトルール:
CSS3 では、BFC はフロー ルートと呼ばれます。
BFC をトリガーするにはどうすればよいですか?
注: 要素の BFC がトリガーされるため (IE6 7 ではズームを 1 にする必要があり、hasLayout をトリガーする)、フロートをクリアするために overflow:hidden メソッドを使用することがあります。 css floatの詳しい説明はこちらを参考にしてください
今日はここまでで、明日の記事に続きます。間違いや不足があればご指摘ください、よろしくお願いします！ ----ミャオトン。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7341
9
1627
14
1352
46
1265
25
1210
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
