CSS の使用法の概要_html/css_WEB-ITnose

時々、自分が Python プログラマーであることが信じられないことがあります。Python エンジニアという名前で入社してからは、Django といくつかの単純なスクリプトを除いて、残りの時間はたくさんの CSS と jQuery を書いていました。現在、一部のコードは非常に醜くて非効率的で、その中の CSS には改善の余地がたくさんあります。
ほとんどの人が思っているように、HTML と CSS は学習や使用が難しくありません。これは、学習曲線という点では VIM を使用するほど難しくはありません。ただし、適切に記述されているかどうかは別問題です。優れた CSS コードは最小限のコードで機能を実現でき、変更が容易で、パフォーマンスも優れています。変更が簡単 たとえば、最も単純な例を挙げると、サブ div の高さと幅がプログラムされている場合は、div の高さと幅を変更し、そのサブ div の高さと幅を適応させておく必要があります。 , 変更作業は非常に面倒なので、サブdivを変更するときは親divの高さと幅だけを変更するだけで済むように、要求に応じてできるだけ適応的に書きます。パフォーマンスが高く、Web ページのレイアウトでもアニメーション効果でも、ネイティブ CSS は高速で互換性の高い選択肢です。

float のクリア

float のクリアは一般的な問題であり、多くの人が空の div を追加し、clear:both を適用することを解決します。実際、要素の末尾にある float を自動的にクリアするには、 after 疑似クラスを使用するだけです

.clear-fix { overflow: hidden; zoom: 1; }.clear-fix:after { display: table; content: ""; width: 0; clear: both; }

DIV 行の配置

最も簡単に考えるのは、div の行を display:inline- に設定することです。ブロックですが、このアプローチでは 2 つの div が作成されます。それらの間には「ギャップ」があり、この「ギャップ」のサイズは通常、font-size によって決まります。クリア間隔は、注釈を使用して実現できます。

<div class="item"></div><!----><div class="item"></div>

より良い方法は float を使用することです

.item {float: left}