DIV+CSS_html/css_WEB-ITnose に関する一般的な注意事項-htmlチュートリアル-php.cn

DIV+CSS_html/css_WEB-ITnose に関する一般的な注意事項

WBOY

リリース： 2016-06-24 12:31:07

オリジナル

953 人が閲覧しました

CSS+DIV を使用して HTML ページを再構築すると、通常、HTML Web デザイン言語を説明するために、Web サイト標準 (または「WEB 標準」) で一般的に使用される用語がいくつか見つかります。 XHTML Web サイトのデザイン標準では、テーブル配置テクノロジは使用されなくなり、css+div を使用してさまざまな配置を実現します。 DIV+CSS コーディングを適用する場合、いくつかの間違いを犯しやすくなります。この記事では、よくある間違いをいくつか挙げます:

1. HTML 要素 (

など) や属性 (class="" など) にスペルミスがないか、忘れていないか確認します。終了タグ(
など)
Xhtmlの構文は比較的厳密であるため、Firefoxなどのブラウザでチェックした場合にXhtmlに構文エラーがあることが判明すると、ページが正常に表示されなくなります。経験豊富なユーザーでも、div のネストを間違えることがよくあります。 Dreamweaver の検証機能を使用して、エラーをチェックできます。

2. CSSが正しいか確認してください

スペルミスがないか、語尾の｝を忘れていないかなどを確認してください。 CleanCSS を使用して、CSS のスペルミスをチェックできます。 CleanCSS は CSS の軽量化を図るツールですが、スペルミスをチェックすることもできます。

3. エラーが発生した場所を特定します

エラーがレイアウト全体に影響を与える場合は、div ブロックを削除して表示が通常に戻るまで、div ブロックを 1 つずつ削除すると、エラーが発生した場所を特定できます。エラーが発生しました。

4. border 属性を使用して、エラー要素のレイアウト特性を決定します

レイアウトに float 属性を使用すると、注意しないとエラーが発生します。このとき、要素にborder属性を追加して要素の境界を決定すると、エラーの原因が判明します。

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 に設定し、リストスタイルをなしに設定することが最善です。

10. DTD を書き忘れていませんか?

いくら調整してもブラウザごとに表示結果が異なる場合は、DTD の先頭に次の行を書き忘れていないか確認できます。ページ:

-//W3C//DTD HTML 4.01 移行版//EN" .org/TR/html4/loose.dtd">