css のトップ スキルを紹介します。知っておくべき div csslayout_experience 交換
フォント サイズには px を使用します。
css を 1 行で宣言します。 次の 2 つを比較してください:
h2 {font-size:18px; border:1px solid blue; color:#000; background-color:#fff;} h2 { font-size:18px; border:1px solid blue; color:#000; background-color:#fff; }
2 つ目はフォーマットされているように見えますが、読むのには役に立ちません。 1 行で書くと、必要な部分をより早く見つけることができます。
以前は 2 番目の方法と同じような方法で書いていましたが、記事にあるように、あまり役に立たないことが徐々にわかりました。 1 行が鮮明に見え、スペースが節約され、ファイルが小さくなります。
コードをブロック単位で記述する
この方法でコードを記述すると、css がよりページらしくなり、問題が発生した場合に最短時間で問題を発見できます。次のようになります:
#content {float:left;} #content p { … } #sidebar {float:left;} #sidebar p { … } #footer {clear:both;} #sidebar p { … }
ブラウザのサポート
最新のブラウザのみをサポートします。それは、ie5 と ie5.5 を放棄することを意味します。これにより時間を大幅に節約できます。 ie6 の場合、ボックス モデル ハックを使用する必要はありません。人気のあるブラウザのみをターゲットにする場合、同じ効果を達成するために必要なハックはいくつかだけです。
netease の新しいホームページの css に注目してみました。!重要や hack はありませんでしたが、ff と ie での表示効果は非常に良好でした。 css を合理的に使用すると、ハッキングを回避できます。当然、デバッグにはさらに時間がかかります。
フローティング要素が含まれている
コンテナ内のすべてのコンテンツは、コンテナと一貫性があるように設計する必要があります。大きすぎると、間違った位置にスライドしてしまいます。マイナスのマージンを使用してコンテナの外側を調整すると、滑りが発生します。
オーバーフローについて
ページ上に 2 つのフローティング要素がある場合、左側のコンテナに大量のコンテンツを出力すると、右側のコンテナがその下で実行されます。これは、マージン、幅、パディングの設定が間違っていることを意味しますが、ff には反映されません。 overflow:hidden または overflow:scroll を使用して、ie がコンテンツをコンテナーから流出させないようにします。
ブロック要素が自動的に空白を埋めることができるようにする
省略形 css
多くの人は margin-top、margin-right、margin-bottom、margin-left を使用します。 .山盛り。実はこれが最も基本的なもので、マージンは直接「margin: 右上、左下の値」と略すことができます。 css の略語の概要はここでご覧いただけます。
不要なセレクターを避ける
スタイル セレクターを最小限に抑えます。 ul li {} や table tr td{} を頻繁に書いていることに気づいたら、それは詳細に書きすぎている証拠です。セレクターの数が少ないと、問題を見つけやすくなります。
完全には翻訳できていないので、自分の言葉がたくさん入っています(笑)。
上記はトップ css スキルのリリースです。div css レイアウトは知識と経験が必要です。その他の関連コンテンツについては、php 中国語 web サイト (www.php) に注目してください。 .cn) !