ここでは、私がプロジェクトでよく使用する 20 の CSS スタイルをまとめました。これらはすべて個人的な経験ですので、皆さんの参考になれば幸いです。
1. line:white -space:nowrap;
2. 省略マークとして表示するオーバーフローテキストを設定します: text-overflow:ellipsis;
(注: text-overflow:clip | ellipsis | ellipsis-word; (で新しく追加されました) css3)
ここで、clip はオーバーフローしたテキストを直接切り取ることを意味します。
値 ellipsis は、テキストがオーバーフローした場合に省略マーク (...) が表示され、省略マークが最後の文字を置き換えることを示します。テキストがオーバーフローした場合、省略マーク (...) も表示されます。違いは、省略マークが最後の単語に置き換えられることです)
aタグ内の画像をクリックすると点線枠が表示されます。IEの画像も同様です境界線があります。どうすれば解決できますか？
解決策:
a{outline:none;}//主に Firefox などのブラウザ用ですが、IE は対象外img{border:0;}
a:active{noOutline:expression(this.onFocus=this.blur () );}//IE6 および IE7 の点線ボックスを解決します。
a タグにフォーカスが当たったら、強制的にフォーカスを解除します。 このとき、a タグには当然点線の枠が付きません。
しかし、接続が多すぎる場合、このコードを 1 つずつ追加するのは現実的ではありません
//上記の状況では、ちょうど 3 枚の写真が表示されています
;
;
、改行によって 2 つの画像の間に隙間が生じるためです。
解決策は、画像を
フロート
にすることです。
5.css overflow:ie6 および ie7 の無効な解決策が隠されています
原因: 親要素の直接の子要素または下位の子要素のスタイルに position
attribute
がある場合、親要素：hidden属性は無効となります。
解決策: IE 6 および 7 では、親要素に overflow:hidden が設定されている場合でも、子要素が親要素によって設定された高さを超えることがわかりました。 このバグを解決するには、親要素で *position:relative; を使用するのが非常に簡単です6.
構文
コードは次のとおりです:
7.CSS text-transform
text-transform プロパティは、テキストの大文字と小文字を制御します。
可能な値
値の説明
none デフォルト。小文字と大文字を使用して規格を定義するテキスト。
大文字にする テキスト内のすべての単語は大文字で始まります。
uppercase は大文字のみを定義します。
小文字の定義には大文字は含まれず、小文字のみが含まれます。
inherit は、 text-transform 属性の値が親要素 から継承される必要があることを指定します。
letter-spacing プロパティは、文字間の間隔 (文字間隔) を増減します。
例: Letter-spacing: 2px;
9.textarea は、右のスクロール バーを削除し、右下隅のドラッグを削除します
コード:
