html+css_html/css_WEB-ITnoseの基礎知識ポイント

インライン要素: コンテンツは幅を拡張します。幅と高さはサポートされません。上部と高さはサポートされません。マージンとパディングの下マージン、左右のサポート、コードの折り返しはスペースとして解析されます (つまり、行に表示されず、行ごとに 1 つずつ表示されます)。これはスペースとして解析されるギャップです。本文など、ページ内のテキストの半分のサイズ font-size を 12px に設定すると、ギャップは 6 ピクセルになります

img はインラインでもブロックでもありませんが、インラインです。ブロックインラインブロック要素
inline-block の機能は次のとおりです: 幅がない場合、コンテンツは幅を拡張します
ie6 と ie7 はインラインをサポートしません- ブロック属性タグのブロック (解決策: float を使用)

4: カーソル属性

cursor: url(xxx.cur)、ポインタ; 意味: jpg、gif、png などを使用できますが、互換性がある可能性があります.cur 形式を使用するのが最善です。前の画像に問題があり、再現できない場合は、ポインタを使用します。

6. 配置

配置:

6. IE6 では、以下のように、配置された要素の親要素の幅と高さが奇数の場合、配置された要素の右と下により良い解決策が見つからない場合は、奇数の幅と高さを持つ親要素を回避します

7. float をクリアします

1. 親に float を追加しますが、親にも親が必要な場合はどうすればよいですか?レイヤーごとに追加しますか?スケーラビリティが低いと、次のような問題が発生します。ページ内のすべての要素がフローティングになり、左右のマージンが自動的に無効になります (フロート状態が悪くなります!)。結論: 適用できません。あきらめてください。 ！
2. フローティング要素の親に display: inline-block を追加します。 結論: ダメです。margin:0 auto は無効です。

3. 浮動要素の後に空の div を追加します。height: 0px ですが、IE6 では最小の高さは 19px ですが、すべての要素に最小要素があるわけではありません。この問題を解決するには、 font-size: 0; を追加します。ただし、IE6 で残っている 2px の問題は解決できません (スタイルは: 空の div を追加、クラスはクリア、スタイルは: clear: Both; font-size: 0; height: 0;) を聞いてください。次回の分解

4. 浮動要素の後に
を追加します。br には left、right などの値が含まれます。br には同じ効果があります。明確に: 両方同じです。IE6/7 で動作し、トラブルが軽減されます。このソリューションを使用することはできますが、構造、スタイル、動作の分離という w3c 標準を満たしていません (私は br タグを書きました)。
5. after 疑似クラスはドキュメント構造を変更せず、content: "content content" は構造を変更しません (F12 を押すと、ドキュメント構造内の単語 "content content" が変更することがわかります)存在しませんが、ページに追加することはできます）、たとえば、 style: p:after{content:"content",background:red;width:10px;height:10px;} 次に、背景が配置されている場所赤への色変更は「コンテンツ」のみです。つまり、コンテンツ内のテキストの背景色と p は変更されません。また、幅と高さもコンテンツ内の内容に影響し、p 要素には影響しません。 , IE6/7 では、a タグの 4 つの疑似要素のみがサポートされます。クラスは after 疑似クラスをサポートしませんが、IE6/7 では浮動要素の親にwidth の場合、float をクリアする必要はありません。after 疑似クラスがサポートされていない場合は問題ありません。親が width を持っている場合、float をクリアする必要がないのはなぜですか?これは、IE に haslayout という機能があるためです (Baidu Encyclopedia だけです)。デフォルトは false で、これを true に設定できます (Haslayout はサイズに基づいてトリガーされます)。要素の内容または親のサイズを再計算するには、親が幅を指定しない場合はどうすればよいでしょうか。このとき、zoom:1 を使用します (Baidu Encyclopedia には、通常以外のズーム値が haslayout を true にするトリガーになる可能性があると記載されています)。したがって、通常は次のように使用されます。浮動要素.clear{zoom:1 };.clear:after{conetent:"";display:block;clear:both;} (前者はie6/7の下でclear floatを解決し、後者は他の下でclear floatを解決します。ブラウザ）、これが現在推奨されています。 クリアフローティングメソッド、推奨、推奨！ ！
6. オーバーフローには浮動要素が含まれる可能性があるため、オーバーフローは明確な浮動要素の錯覚を作成し、浮動要素の親に追加されます。ただし、IE6 では問題が発生します。要素を上位レベルに引き上げる関数です。次に、zoom:1 を使用して haslayout をアクティブにします。表示されるべきコンテンツが非表示になる可能性があるため、このメソッドはほとんど使用されません。

注: clear 属性はブロック要素にのみ追加でき、インライン要素には影響しません。 ！