CSS のスタイルを設定する賢い方法のまとめ-CSSチュートリアル-php.cn

CSS のスタイルを設定する賢い方法のまとめ

高洛峰

リリース： 2017-03-07 14:29:30

オリジナル

1292 人が閲覧しました

今日は、私がこれまでに遭遇したいくつかの特殊なスタイルの実装についてまとめます。目的は 2 つあります。1 つは、将来必要になったときに見つけて使用できるように、これらのメソッドを記録することです。 2 つ目は、大多数のフロントエンドプログラマーが回り道をせずに済むように、偉大な神々の知恵の結晶を継承することです。この記事は更新版であり、今後も優れた CSS スタイルのスキルがあれば随時更新していきます。

1. ブロック要素を水平方向と垂直方向に中央揃えにします (特別な感謝: Xin Life。Xin 兄弟の製品は高品質に違いありません。尊敬します)

ブロック要素の水平方向と垂直方向の中央揃えについては、水平方向のセンタリングの方法については、これ以上説明する必要はありません。通常、これは margin:auto などのメソッドを使用して実現できます。垂直方向のセンタリングに関しては、vertical-align:middle 属性がありますが、これは table タグにのみ適用され、table タグの効果を制御するのが難しいことは誰もが知っています。。。したがって、一般的に使用される方法は、子要素の inline-block 属性を設定し、その行の高さ属性である line-height 値を親要素と同じ高さに設定することです。ここで、「Xin Life」から派生したメソッドを宣伝したいと思います

http://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF % B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8% AD /

コードは以下の通りです:

HTMLアスペクト:

<body>
　　　　<p class="big">
　　　　　　<p class="small"></p>
　　　　　</p>
　　</body>

ログイン後にコピー

CSSアスペクト:

.big{   
　　　　width:500px;   
　　　　height:500px;   
　　　　border:1px solid red;   
　　　　position:relative;   
　　　　}   
　　.small{   
　　　　width:200px; /*自己元素宽高可任意设定 */
　　　　height:200px;   
　　　　position:absolute;left:0px;top:0px;rightright:0px;bottombottom:0px;   
　　　　margin:auto;   

}

ログイン後にコピー

上記のコードでは、子要素の幅と高さを任意に設定しています。この要素は、親要素の水平方向および垂直方向の中央に表示できます。親要素では、position の相対属性を使用します。子要素では、position 属性を絶対値に設定した後、4 方向すべての値を 0px に設定します。そしてマージン値を適応型にします。要素を調べると、この設定の後、子要素のマージン領域が親要素全体を埋め、左右のマージン値と上下のマージン値が等しいことがわかります。ただし、これは、コード値が競合する場合、先頭の値と左の値が最初に解析されるというルールに準拠しません。なぜなら、Xiaoge は原理が何なのかを知らないからです。。誰かがそれについて知っているなら、彼が私に教えてくれることを願っています。しかし、これは良い方法なので、ぜひ皆さんも学んで活用していただければと思います。

2. 疑似クラスの float クリア後

通常、ブロック要素に float を設定した後、レイアウトの混乱を避けるために float をクリアする必要があります。 float をクリアするには 2 つの一般的な方法があります: 1) 後続のサブ要素 css に「clear:both;」を記述します。 2) フローティング要素の親要素に「overflow:hidden」と記述します。ここで、3 番目のメソッドを使用して、after 疑似クラスを使用して浮動属性を書き込むことができます。これにより、浮動が必要な場所があるときはいつでも、その親要素にそのような浮動属性を追加するだけで済みます。

コードは次のとおりです:

.clearfix:after{   

　　　　　content:"";   

　　　　　display:table;   /*利用table不允许浮动的属性来清除浮动。也可以替换成"overflow:hidden;"*/

　　　　　clear:both;   

　　　　　}

ログイン後にコピー

このメソッドには、reset に書き込むことができ、後で複数回呼び出すことができるという利点があります。

CSS スタイリングのいくつかの賢い方法の上記の要約 (推奨) は、エディターによって共有されたすべての内容です。参考にしていただければ幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSS スタイルを要約するさらに独創的な方法については、PHP 中国語 Web サイトの関連記事に注目してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS のスタイルを設定する賢い方法のまとめ