CSS のスタイルを設定するためのいくつかの賢い方法のまとめ。 _html/css_WEB-ITnose

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

1. ブロック要素の水平方向と垂直方向のセンタリング (Special thanks to: 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:

div> ;
相対; }

.small{

width: 200px; /*独自要素の幅と高さは任意に設定可能*/

Height:200px;

position:absolute;left:0px ;top:0px;right:0px;bottom:0px;

margin:auto;
background-color: #cc9900;
}

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

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

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

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

.clearfix:after{

content:"";

display:table /*float をクリアするには、float を許可しない table の属性を使用します。 "overflow:hidden;"*/

clear:both;

}

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

この投稿が皆さんの今後の学習に役立つことを願っています。私が出会った良い方法も随時更新していきます。最後に、「Xin Space」をはじめとするフロントエンドマスターの皆様に改めて感謝申し上げます。おかずも互角！ ！