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

以下は私が日々の勉強で蓄積したものです。かなり複雑ですので、修正や追加を歓迎します

1. CSSリセット（cssリセット）

これは私が単にまとめたものであり、そうではありません。必要に応じて追加を続けることができます:

body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0;font-size:12px;}

ol,ul{ margin:0;padding:0;list-style: none;}
a{text-decoration:none;}
img{border:none;}

*{margin:0;padding:0;} は使用しないでください。なぜなら、div には内側と外側のマージンがなく、p には外側のマージンしかありません。パディングの問題などがあり、パフォーマンスの問題も発生します。独自のタグを記述して、Firefox で F12 を使用して確認することもできます。要素の内側と外側のマージン。

2. フルスクリーンマスク

ページのドキュメント構造は次のとおりです: body

3. インライン要素とブロック要素

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

Block 属性タグ: 幅がない場合、デフォルトで行を埋めます。幅をサポートしますと高さ、およびすべての CSS コマンドをサポートします

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

4: カーソル属性

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

5. 幅が異なる場合。設定しても、幅は引き続きコンテンツによってサポートされます

2. フロートに設定した後、ドキュメント フローから外れます

6. 配置

配置:

1. 絶対配置はフローティングと同じで、要素が作成されます。幅が設定されていない場合、ブロック属性ラベルのコンテンツは幅と高さをデフォルトでサポートします。前者はレベルが高くなります (スタックレベルですが、常に 1 未満です)。固定位置で幅が設定されない場合は、ブロック要素のコンテンツの幅を拡張できます。これは基本的に絶対配置と同じです。違いは、IE6 では固定配置がサポートされていないため、js 5 で解決できます。親の overflow: hidden は子セットをカバーできません。 toposition:relative (これは、子要素の高さが親要素よりも高い場合、通常の状況では、相対に設定しても要素自体には影響しません)、この問題を解決する方法は、位置決めを追加することです。

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 属性はブロック要素にのみ追加でき、インライン要素には影響しません。 ！