Webページ作成時にマスターすべき8つのCSSレイアウトスキル_体験交流

1. 疑問があればすぐに確認する
エラーが発生したときに元のコードを簡単に確認できれば、かなりの手間を省くことができます。 W3C には、XHTML と CSS に使用できる検出ツールがあります。http://validator.w3.org を参照してください。ファイルの先頭にあるエラーは、不適切な構造やその他の要因によりさらに多くのエラーを引き起こす可能性があることに注意してください。最初に最も明らかなエラーのいくつかを修正してから再チェックすることをお勧めします。これにより、エラーの数が減る可能性があります。

2. フローティング関数を使用するときは、必ず命令を適切にクリアしてください。

フローティング関数は危険な関数であり、期待どおりの結果が得られない可能性があります。周囲のコンテナの境界を越えて広がる浮遊要素やその他の異常な状況に遭遇した場合は、それが正しく行われていることを確認してください。 Complex Spiral Consulting Web にある Eric Meyer のチュートリアルを参照してください。

3. パディングまたは境界線を使用して、境界線が重ならないようにします。

そこにあるべきではない小さなスペースを確保するのに苦労したり、小さなスペースが必要なときにそれができない場合があります。何としても絞り出す。マージンを使用すると境界を重ねるのが簡単です。Andy Budd が Web サイトで何が可能かを説明しています。

4. 要素のパディング/ボーダーと高さまたは幅を同時に指定しないようにしてください。

Windows バージョンの IE では、幅と高さに関して計算上の問題が発生することがよくあります。この問題を解決する方法はいくつかありますが、親要素で高さと幅を指定する必要がある場合は、親要素内の子要素にマージンを適用するか、子要素で高さと幅を指定する必要がある場合は、これを実現するには、親要素にパディングを適用します。

5. min-width/min-height に依存しない

Windows バージョンの IE は両方の構文をサポートしていません。ただし、Windows 版 IE でも、min-width/min-height と同等の効果がある程度得られるため、IE にフィルタリング機能を追加すれば、希望する結果を得ることができます。

6. 疑わしい場合は、まずパーセンテージを下げてください。

エラーによって 50% 50% が 100.1% になり、Web ページで問題が発生することがあります。現時点では、これらの値を 49% または 49.9% に変更してみてください。

7. 「TRouBLed」の書き方を覚えておいてください

ボーダー、マージンとパディングの省略構文には特定の順序があり、上から開始して時計回りに、上、右、下、左となります。したがって、 margin :0 1px 3px 5px; 結果は、上部に境界線がなく、右側に 1 ピクセルというようになります。 「TRouBLe」と覚えておけば順番を間違えることはありません。

8. 値がゼロでない限り、単位を指定する必要があります。

CSS では、フォント、マージン、その他の値ごとに単位を指定する必要があります。 (唯一の例外は行の高さです)