WEB標準を学ぶためのCSS/XHTML知識まとめ1/3ページ_体験交流

1. 互換性の問題の多くは、ブラウザごとにデフォルトのパディングマージン値が異なるタグが異なることが原因で発生します。したがって、事前に定義できます

コードをコピーします コードは次のとおりです:

* {padding: 0; margin:0;}
p>

または

コードをコピーします コードは次のとおりです:

ul,li,h1,h2,h3,h4,h5, h6,p,table,td,p ,img,hr,dd,dt,span,a,dt,dd,ol{margin:0;padding:0;font-size:12px;}

2. レイアウトに関しては、Dreamweaver CS3 のテンプレートの書き方が一番分かりやすいと思います。大規模なレイアウトの場合は、dreamweaver cs3 のデフォルトのテンプレートを直接使用できます。その後、コメントを削除すると機能します。

3. マージン/パディングを適切に使用するボックス内の要素の位置を調整するときは、ボックスのパディングを使用することをお勧めします。ボックス内の要素のマージンは使用しないでください。

その理由は、ボックス内の要素でマージンを使用すると、ボックスのマージンに影響し、位置ずれが発生するためです。

ただし、パディングを使用するときは 1 つの点に注意してください。たとえば、元の width:100px ボックスが padding-left:20px に設定されている場合、幅は 20px 減算される必要があります。

4. ボックスの場合、境界線を設定した後、幅から境界線の太さを差し引く必要があります。たとえば、幅が 100px のボックスの左右の辺が 1px の場合、ボックスの幅は 98px に設定する必要があります。

5. ボックスを追加するときは、可能な限り幅と高さを指定しないようにしてください。

内部要素により高さを拡張できます。

幅が設定されていない場合、デフォルトは 100% の幅です。

6. ボックスの背景画像と背景色を同時に設定する方法は、最初に背景画像を設定し、次に背景色を設定することです。コードは次のとおりです。
/>

コードをコピー a> コードは次のとおりです。

.bg {background:url(/images/blbian.gif) no-repeat}
.style1 {width :100px;height:100px;background-color:#ebf1e5; }

7. float:left などの場合 記述が多すぎて周囲や下位の要素に影響を与える場合は、clear:both を使ってクリアしてみてください。

コードをコピー コードは次のとおりです。

.clearfloat {
clear:both; 高さ:0;
フォントサイズ: 1px;
行の高さ: 0px;
}

8. 以下の設定を行う場合

は互換性の問題を引き起こします。 ie6 では問題が発生し、ボックスの高さが 3 ピクセルではないことがわかります。
font-size:1px; の設定が必要なので問題ありません。 dw cs3テンプレートのclearfloatでの記述方法を参考に、line-height:0pxも追加してください。しかし、追加しないことも可能であることがわかりました。しかし、カナダ協会はより正式です。

9. テキストの 1 行の高さを設定する場合は、line-height も同時に設定します。そうしないと、互換性の問題が発生し、テキストがわずかにずれてしまいます。

10. ul li list を使用する場合は、必ず list-style-type: none を設定してください。そうしないと、互換性の問題が発生します。原点は ff の下に表示されますが、ie の下には表示されないことがよくあります。