CSS+DIV は、Web サイト標準 (または「WEB 標準」) でよく使用される用語の 1 つであり、XHTML Web デザイン言語でのテーブル配置方法との違いを説明するためによく使用されます。標準では、テーブル配置テクノロジを使用する代わりに、CSS div を使用してさまざまな配置を実現します。 DIV+CSS コーディングを使用する場合、いくつかの間違いを犯しやすくなります。この記事では、よくある間違いをいくつか挙げます:
1. HTML 要素タグのスペルミスや終了タグの忘れを確認してください
ベテランでも div のネスト関係で間違いを犯すことがよくあります。 Dreamweaver の検証機能を使用して、エラーをチェックできます。
2. CSSが正しいか確認してください
スペルミスがないか、語尾の｝を忘れていないかなどを確認してください。 CleanCSS を使用して、CSS のスペル ミスをチェックできます。 CleanCSS は CSS の軽量化 (CSS 圧縮) を行うためのツールですが、スペル ミスをチェックすることもできます。
3. エラーが発生した場所を特定します
エラーがレイアウト全体に影響を与える場合は、div ブロックを削除して表示が通常に戻るまで、div ブロックを 1 つずつ削除すると、エラーが発生した場所を特定できます。エラーが発生しました。
4. border 属性を使用してエラー要素のレイアウト特性を決定する
レイアウトに float 属性を使用すると、注意しないとエラーが発生します。このとき、要素に border 属性を追加して要素の境界を決定すると、エラーの原因が明らかになります (float 生成とも呼ばれ、CSS float をクリアする方法を学びます)。
5. float要素の親要素にclear属性を指定することはできません
MacIE上でfloat要素の親要素にclear属性を使用すると、周囲のfloat要素のレイアウトが乱れてしまいます。これは MacIE の有名なバグです。知らないと遠回りしてしまいます。
6. Float 要素は width 属性を指定する必要があります
幅を指定せずに float 要素を表示すると、多くのブラウザにバグがあります。したがって、float 要素の内容に関係なく、それに width 属性を指定する必要があります。
また、要素を指定するときは、単位として px ではなく em を使用するようにしてください。
7. Float要素ではmarginやpaddingなどの属性を指定することはできません
IEではmarginやpaddingを指定してfloat要素を表示する際にバグがあります。したがって、float 要素には margin および padding 属性を指定しないでください (float 要素内に div をネストして、margin および padding を設定できます)。ハックを使用して IE に異常な値を指定することもできます。
8. float 要素の幅の合計は 100% 未満でなければなりません
float 要素の幅の合計がちょうど 100% の場合、一部の古いブラウザでは正しく表示されません。したがって、幅の合計が 99% 未満になるようにしてください。
9. デフォルトのスタイルをリセットしましたか?
マージンやパディングなどの特定の属性の解釈はブラウザごとに異なります。したがって、開発前にすべてのマージンとパディングを 0 に設定し、CSS リストのスタイルをなしに設定することが最善です。
10. DTD-DOCTYPE ステートメントを書き忘れていませんか?
どんなに調整してもブラウザごとに表示結果が異なる場合は、次の DTD 行を書き忘れているかどうかを確認できます。ページの先頭:
1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
しかし、現在 DOCTYPE は次のように省略できます:
1. <!DOCTYPE HTML>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
