トップのCSSスキルを公開、div cssレイアウトを知っておく必要がある_体験交流

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) !