ホームページ >ウェブフロントエンド >CSSチュートリアル >よく使われるいくつかの古典的な CSS テクニック_体験交流
垂直方向の中央揃えには line-height を使用します
line-height:24px;
固定幅のコンテナを使用し、行を垂直方向の中央揃えにする必要がある場合は、line-height を使用します (高さは親レイヤ コンテナと同じ)、垂直方向のセンタリングの詳細については、ここで確認できます。
コンテナフロートのクリア
#main {
overflow:hidden;
}
このような問題については以前にも言及しました。詳細については、ここを参照してください。
リンクの折り返しを許可しない
a {
white-space:nowrap;
}
上記の設定によりリンクの折り返しを防ぐことができますが、個人的には長くすることをお勧めしますリンクには対応する行が表示されます (改行については、円の中央のレコードを参照してください)。
Firefox に常にスクロール バーを表示させる
html {
overflow:-moz-scrollbars-vertical;
}
Mozilla/Firefox のプライベート CSS プロパティの詳細については、を参照してください。ここまで。クロスブラウザーをサポートするには、
body, html {
min-height:101%;
}
ブロック要素を水平方向に中央揃えにします
margin: 0 auto;
実際には、これは
margin-left: auto;
margin-right: auto;
基本的にすべての CSS 教科書でこのテクニックが説明されています。追加することを忘れないでください。それの幅。
body{
text-align: center;
}
を使用して内部コンテナを定義することもできます
text-align: left;
復元。
エクスプローラーのテキストエリアのスクロール バーを非表示にする
テキストエリア {
overflow:auto;
}
エクスプローラーのテキストエリアにはデフォルトで垂直スクロール バーがあります (聞かないでください)なぜ) 。
印刷ページングの設定
h2 {
page-break-before:always;
}
page-break-before 属性は、Web ページを印刷するときにページングを設定できます。
リンク上の点線のボックスを削除します
a:active, a:focus {
outline:none;
}
Firefox はデフォルトでリンクにフォーカスします (または ) をクリックして点線フレームを追加します。これは上記のプロパティを使用して削除できます。
最も単純な CSS リセット
* {
マージン: 0; パディング: 0
}
「複雑」にしたい場合は、YUI のアプローチを参照してください (およびここ)。一部のユーザーも元のメッセージで意見を表明しました
私は Niall Doherty の意見に同意せざるを得ません。* {margin: 0px; padding: 0px;}
基本的には、「すべての CSS 要素を走査し、それにこれらの 属性」。これはサーバーに非常に不必要な負担を与え、
いくつかの要素を削除した後に再度パディング/マージンを与える必要があるため、悪いセマンティックプラクティスです。