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 プロパティを設定するだけです。
display: inline-block
height: (auto以外の任意の値)
width: (auto以外の任意の値)
float: (左または右)
position: 絶対
writing-モード: tb-rl
ズーム: (通常以外の任意の値) Internet Explorer 7 には追加のプロパティがいくつかあります (完全なリストではありません):
min-height: (任意の値)
max-height: (なしを除く任意の値)
min-width: (任意の値)
max-width: (なしを除く任意の値)
overflow : (可視以外の任意の値)
overflow-x: (可視以外の任意の値)
overflow-y: (可視以外の任意の値)
位置: 固定
ここで、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レイアウトルール:
内部のBoxは縦方向に順番に配置されます。
ボックスの垂直距離はマージンによって決まります。同じ BFC に属する 2 つの隣接するボックスのマージンは重なり合います
各要素のマージン ボックスの左側は、それを含むブロック境界ボックスの左側に接します (左から右への書式設定の場合、それ以外の場合はその逆)。これは浮きがあった場合にも当てはまります。
BFC エリアはフロート ボックスと重なりません。
BFC はページ上で分離された独立したコンテナーであり、コンテナー内のサブ要素は外部の要素に影響を与えません。およびその逆。
BFC の高さを計算するとき、浮動要素も計算に参加します。
CSS3 では、この概念が変更されました: http://www.w3.org/TR/css3-box/#block-level0
CSS3 では、BFC はフロー ルートと呼ばれます。 BFC をトリガーするにはどうすればよいですか?
float: (none を除く任意の値)
overflow: (visible を除く任意の値)
display:(table-cell/table-caption/inline-block)
位置: (静的/相対を除く任意の値)
注: 要素の BFC がトリガーされるため (IE6 7 ではズームを 1 にする必要があり、hasLayout をトリガーする)、フロートをクリアするために overflow:hidden メソッドを使用することがあります。 css floatの詳しい説明はこちらを参考にしてください 今日はここまでで、明日の記事に続きます。間違いや不足があればご指摘ください、よろしくお願いします！ ----ミャオトン。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
