CSS常用小技巧

一、行の高さを使用して垂直中央を実現する

elm { height: 24px; line-height: 24px; } 一定の高さの容器があり、単行の内容しかない場合は、要素の垂直中央を実現するには、要素のline-heightとheightを同じに設定するのが最善です.

二、コンテンツオーバーフローによるレイアウト破壊の防止

elm {overflow: hidden;}
普段のWeb制作では、大きなコンテンツ(例えば画像)が幅を固定したフローティングコンテナに置かれると、元のレイアウトを破壊する可能性があります.このようなバグを解決するには「overflow:hidden」を思い出すに違いない.実際には、オーバーフローしたコンテンツを隠すには、一部のコンテンツがカットされているように見えますが、少なくともあなたのレイアウトは完全で、変わらないままになります.

三、リンク内容の改行防止

a { white-space: nowrap; work-break: keep-all; } このテクニックは、リンクの内容の改行を防ぐためのテクニックですが、実際にはリンクだけでなく、要素を改行しない必要がある場合にも使用できます.

四、常にFirefoxの下にスクロールバーを表示する

html { overflow: -moz-scrollbars-vertical; } Firefoxブラウザでは、デフォルトの垂直スクロールバーが非表示になるため、Webサイトを閲覧するときにページの高さが異なるときに水平にシフトすることがあります.この方法では、垂直スクロールバーを常に表示できます.

五、ブロック要素の水平中央

elm {   width:     ；   margin: 0 auto;      }

この方法は、現代のブラウザでは完全に使用できますが、この要素は明示的な幅設定が必要であることを前提としています.

六、IE下textareaの垂直スクロールバーを取り除く

textarea { overflow: auto; }
「textarea」テキスト領域はIEブラウザにデフォルトで垂直スクロールバーが表示されていることはよく知られています.これを出したくないなら、上のように設定すればOKです.

七、文書の印刷時に強制的に改ページする

h2 {page-break-before:always;} 上の行の短いセグメントコードを使用すると、ページを印刷するときに必要な場所で強制的にページングしたいことを実現できます.

八、リンクの外枠を削除する

a:active, a:focus { outline: none; }
上のコードを設定するだけで、リンクに「active」と「focus」の状態の外枠を表示しなくてもいいです.もちろん、同じような方法で必要なスタイルを設定することもできます.

九、textareaのブラウザでの自由な伸びをキャンセルする

textarea {resize:none;}
Firefoxとwebkit内のコアのブラウザでtextareaには、ユーザーがtextareaのサイズを自分で制御できる機能があります.このような機能をキャンセルしたい場合は、コードに上のコードを加えるだけで済みます.

十、ブラウザ番号の制限を取り消す

html { -ms-text-size-adjust: 100%;     -webkit-text-size-adjust: 100%; }
普段の制作で気づいたかどうかはわかりませんが、フォントの設定が小さすぎると、ハンドヘルドやwebkitのgoogle chromeで奇妙なことが起こり、chromeの下で12 px以下のフォント(試練なし)を解析することはなく、上のコードを使ってこのような問題を解決できると言われていますので、試してみてください.

十一、ブラウザの横スクロールバーを隠す

html { overflow-x: hidden; }
ブラウザに横方向のスクロールバーを表示しないで、bodyで「overflow-x:hidden」を使用すると何の効果も得られない場合があります.上のようにhtmlに書くと、あなたが望む効果が得られます.

十二、IEの下の画像のスケーリングと下の3 pxの問題を解決する

img { vertical-align: top; -ms-interpolation-mode: bicubic; } imgを運用する時、よくピクチャーの底産が理由もなく3 pxを多く出すことに出会って、もしあなたがこのような面倒を解決したいならば、あなたは“img”の中で1つの“vertical-align:top”を設定するだけです;

十三、IE 6の振動を防止する

* html, * html body{ background-image:url(about:blank); background-attachment:fixed; }
この小さなテクニックはIE 6ブラウザの下での振動の問題を防止するために使用されています.position:fixedを使用するとき、私たちは「:expression」方法を採用してIE 6での互換性の問題を処理するとき、よく私たちにこの振動の問題をもたらします.あなたは上のコードを加えるだけで、彼は振動しません.