あなたのcssスキルを高めるcss開発テクニック(転載)

一、resizeは画像の対比を実現する

resizeの構文は次のとおりです.

resize：none | both | horizontal | vertical

ケース効果は以下の図(マウスを左下の白い領域に移動し、右側にドラッグして画像のコントラスト効果を実現)です.
resizeの次のコードに適用しました.

resize: horizontal;

水平に伸ばすことができます!

二、:not()の応用技術

私たちは普段ナビゲーションバーの分割線を書くとき、最後のラベルには分割線がありません.私たちの一般的な書き方は以下の通りです.

/*            */
.nav li { border-right: 1px solid #666; } /*           */ .nav li:last-child { border-right: none; }

運用:not()の後は以下のように書きます.

.nav li:not(:last-child) { border-right: 1px solid #666; }

 

.nav li:first-child ~ li { border-left: 1px solid #666; }

私たちはカンマで区切られたリストで、最後にカンマがないようにして、次のように書きました.

ul > li:not(:last-child)::after { content: ","; }

notの応用は、私たちを便利にして、いくつかのコードを節約しました!

三、任意の要素が垂直に中央になる

css垂直中心については、次のコードがあります.

html, body { height: 100%; margin: 0; } body { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -webkit-flex; display: flex; }

もちろん、これは一定の互換性の問題があります!でも現代ブラウザは問題ありません!

四、表のセルの等幅

表のセルを等幅にするには、次のコードを使用します.

.haorooms{
  table-layout: fixed; }

五、Flexboxを使って各種Margin Hacksから抜け出す

サイドバーを実装する場合、nth-、first-、last-childなどのmarginを設定する必要はありません.Flexboxを使用して均一な分布を簡単に実現できます.コードは次のとおりです.

.list {
  display: flex; justify-content: space-between; } .list .person { flex-basis: 23%; }

六、空の接続に属性選択子を使う

 
空のaラベルに属性を追加することもできます.コードは次のとおりです.

a[href^="http"]:empty::before { content: attr(href); }

七、box-sizingの初期化

htmlからbox-sizingプロパティを継承すると、後期メンテナンスが便利になります.

html {
  box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }

八、nth-childで負数を使う

nth-childでは負の数を使用し、次のような数以下の値を選択できます.

li:nth-child(-n+4){background:red}

4以下のliは、赤で表示されます!
次のように適用することもできます.

li {
  display: none; } li:nth-child(-n+3) { display: block; }

上のコードの意味は、最初の3つのliを表示させ(3以下)、他のliを隠すことです!

九、テキスト表示の最適化

html {
  -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

上のコードはフォントを私たちのデバイスの中で最もよく表示することができます!

十、borderの応用テクニック!

 
borderの応用は広いですね.私は以前慕课网の课程html 5の左侧でナビゲーションして、3本の棒の书き込みを话しました!、box-shadowを運用していますが、文章については、具体的に見てください.http://www.haorooms.com/post/box_shadow_css
しかし、これはcss 3の属性で、今日はborderを使って3本の棒を書くことをお話しします.互換性がいいですね.コードは次のとおりです.

width:40px;height:7px; color: #999; border-top:18px double; border-bottom: 6px solid;

borderのdoubleプロパティを駆使して、簡単に3本の棒を描くことができて、互換性がいいです!そして、border-colorはcolorを継承することができ、colorの値を修正すればborder-colorの値を修正することができます!

十一、vertical-align属性

vertical-alignは、行内要素、またはinline、inline-blockなどでのみ機能します.あるdivで垂直中心を使用すると役に立たないので、
このほか、vertical-alignは数値とパーセントをサポートしています.
次のように書くことができます.

.haorooms{vertical-align:-2px;} .haorooms{vertical-align:-10%;}

この負の値はmargin-bottomと似ていますが、vertical-alignは親要素を大きくすることができます!

十二、margin重複解決方案の列挙

1、親要素bfc、
2、親要素をpaddingする
3、親要素をborderに与える
4、サブエレメントの前に任意の空のインラインエレメント(例えばspan、nbspなど)を追加する
転載先:https://www.cnblogs.com/yaomin/p/6252769.html