XHTMLドキュメントのルート要素である<HTML>要素は、非常に馴染みがあります。しかし、私は最近レイアウトをしようとしてきましたが、IEでは、それほど単純な役割ではなく、並外れた「性質」があることがわかりました。参照のためにそれを要約しましょう:
IE6標準モード:heishされた高さと幅が設定されていても、そのサイズは常に視聴領域全体をカバーします。
cused彼のためにどんな種類のパディングと境界線が設定されていても、サイズとサイズは常に視聴領域全体を埋めます。
◎マージンは無視されます。
◎初期含有ブロックは、ビューエリアの境界幅をマイナス<html>
CSS3を使用してそれを表現すると、IE6の<html>を高さの並外れた要素と見なすことができます:100%。幅:100%;ボックスサイズ:ボーダーボックス;そして、これらの属性は不変です。
IE7標準モード:IE7はIE6でいくつかのCSSバグを修正しましたが、<html>の理解はIE6よりもはるかに複雑です。 IE6は奇妙ですが、変更できる属性はほとんどないため、まだ簡単です。 IE7の<HTML>はより多くの属性を受け入れることができますが、アルゴリズムは仕様に従わず、正直です。そのため、IE6よりも把握する方がはるかに厄介です。
1つ目は、自動拡張機能です。
<html>要素はy方向に単純で、IE6の通常の要素の高さの理解に似ています - コンテンツの高さが<html>の高さを超えている場合、または<html>が固定された高さ(つまりデフォルト値Auto)を持っていない場合、<html>は自動高さを自動的に拡大してコンテンツを含めます。
しかし、X方向では、問題は主に<body>の幅の理解に焦点を当てています。ここに2つの状況があります:( <html>と言っていませんでしたか?<body>の幅について話したのはなぜですか?<html>が自動的に拡張したい場合、<body>が拡張する幅がどれだけ広いかを知る必要があります。
最初のケース:<html>の幅は、0ではない値(デフォルト値Autoを含む)以外の値以外の値である場合、<body>の幅は次のルールで決定されます。
1. <body>の幅が固定値である場合、非常に多くの幅があります。
2。<body>の幅がデフォルト値Autoである場合、幅は<html>のコンテンツ空間をカバーします。
3. <body>自体が縮小および周囲の特性を備えている場合:絶対的またはディスプレイ:インライン(奇妙なものはフロートですが、このアイテムを満たしていない、2を満たす)、それはコンテンツの幅に依存します。
2番目のケース:<html>の幅が0の場合、1番目と3番目のポイントは上記と同じであり、<body>の幅がデフォルト値Autoである場合、2番目のポイントはコンテンツに適応しますが、驚くべき現象があります。 <html>のコンテンツスペースは<html>で覆われています。 <html>の幅は0であるため、<body>の幅も0に崩壊します。
第二に、<html>の幅と高さの設定は、驚くべきことに、<body>(または<body>の含まれるブロック)の参照率に影響します。
y方向では、<html>の高さがデフォルト値Autoである場合、<body>の高さがパーセンテージ値を取得する場合、無視されます。ただし、<html>の高さ値が特定の高さになると、たとえ0であっても、<body>の割合が適用されます。しかし、奇妙なのは、このパーセンテージの高さの計算基準は、<html>の高さではなく、視野領域の高さの高さの高さの合計の合計が<html>を差し引いていることです。
X方向では、幅がデフォルト値の自動を取得し、Y方向が異なる場合、<body>の幅の割合は無視されませんが、その計算参照はY方向と同じくらい奇妙であり、ビューポート幅のマージンボーダーパッド幅<html>の合計を減算します。幅に特定の値がある場合、<body>の幅の参照率として置き換えられます。
繰り返しますが、<body>が位置に設定されている場合:絶対に、<html>の境界線は無効になります。これはもう一つの驚くべきバグです。
最後に、初期含有ブロックは、基本的に正常なビューポート長方形を採用しています。しかし、絶対に配置された要素を備えた封じ込めブロックを作成することは不可能です。しかし、<html>によって作成された含まれるブロックは、ビューポートの長方形であり、知っています。
とても厄介です。それは大きな頭であるだけでなく、それを整理した後の大きな頭でもあります。将来を振り返った後、あなたがそれをはっきりと見ることができるかどうかはわかりません。 IE7 AH IE7 ...私はあなたをとても愛していると言いたいです...
IE5および癖モード◎<html>および<body>すべての幅と高さの設定は無視され、視聴領域でいっぱいのままです。
paddingとマージンは受け入れられません。
◎<body>パディングとマージンを受け入れますが、負のマージンには視覚効果はありませんが、他の対応するパラメーターを計算するときに持ち込まれます。
body>の境界線、背景、その他の属性は、<html>要素に上に転送されます。
◎初期含有ブロックは、<body>のパディングエッジです。
有用性この要約は、最初のレイアウト問題から派生しています。レイアウトの問題は、その用途の1つです。投稿を書き直して後で整理します。しかし、そのレイアウトはいくつかの機能を使用しているだけであり、タップする可能性が増える必要があるため、ゆっくりと勉強してください。