ホームページ > ウェブフロントエンド > CSSチュートリアル > よく使われるいくつかの古典的な CSS テクニック_体験交流

よく使われるいくつかの古典的な CSS テクニック_体験交流

WBOY
リリース: 2016-05-16 12:05:00
オリジナル
1184 人が閲覧しました

垂直方向の中央揃えには 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 要素を走査し、それにこれらの 属性」。これはサーバーに非常に不必要な負担を与え、
いくつかの要素を削除した後に再度パディング/マージンを与える必要があるため、悪いセマンティックプラクティスです。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート