簡単で使いやすいCSSのテクニックを知っておくべきです

フロントエンドとして、仕事の中でレイアウトに関する問題に遭遇するのは避けられません.以下は私が整理したCSSに関するテクニックで、あなたに役に立つことを望んでいます.

1、単語の頭文字を大文字にする

普通はJSで実現しますが、実はCSSで実現できます.JSコード:

    var str = 'hello world';
    
    str.replace(/( |^)[a-z]/g,(L)=>L.toUpperCase()

    Heool World
      

css実装:

    text-transform：capitalize; （               ）
 
    text-transform     ：
                        uppercase （    ）
                        lowercase  (    )
                        capitalize  (     )
                        none        (  )
                                                    

2、要素選択ハイライト

     input  :
  
    input:checked + .check {
        color:red;
    }
            

3、隣接要素に外枠を追加する

エレメントにborder-topを設定する場合、最初のエレメントに設定したくない場合があります.

    li+li {
        border-top: 1px solid red;
    }
            

4、複数列などの高さ

    display:table;
            

5、フローティングの影響を取り除く

    display:flow-root;
            

6、inputのsize属性

     input type   text/password ，size      input         ，    size              ，    ‘px’      
            

7、positionの粘着特性

positionのプロパティabsolute、fixed、staticが新しいプロパティstickyを紹介するのが一般的です

    position:sticky;   sticky        （top,botton,left,right）    
        ：
        1、     overflow:hidden    overflow:auto
        2、     top、bottom、left、right
        3、          sticky     
        4、sticky           
        

8、フォーム要素の高速リセット

元のbuttonボタンをリセットするのは面倒ですが、いくつかのプロパティを設定します.

    button {
        background: none;
          border: none;
          color: inherit;
          font: inherit;
          outline: none;
          padding: 0;
    }
       
    button {
        all:unset;
    }
            

9、テキスト省略記号表示

テキストの省略記号は、みんなよく使われていると信じています.

            
    div {
      white-space:nowrap;/*          */
      overflow: hidden;/*               */
      text-overflow: ellipsis;
      /*               ，          ，                     */
    }   
    
      
     div {
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box; /*                 */
       -webkit-line-clamp: 4; /*          */
       -webkit-box-orient: vertical; /*                     */
     }    

10、テキストの両端揃えを設定する

    div {
        width: 100px;
        padding: 0 10px;
        background: pink;
        margin-bottom: 10px;
        text-align-last:justify; /*      */
    }  

11、要素に行の高さを追加する

エレメントに行高を追加するには、それぞれのエレメントにp、hを追加する必要がありますが、bodyに直接追加すればいいのです.

     body {
        line-height:1;  
    }
            

12、css頭文字拡大

p:first-letter{
    display:block;
    float:left;
    margin: 5px 5px 0 0;  
    color:red;
    font-size:1.4rem;
    background:#ddd;
}    

13、クリックされたリンクのポイントボックスを削除する

a{
    outline:none     outline:0
}

14、属性値の計算

div {
    width:calc(100%-100px)     100%   100px   
 }

15、コンテンツ編集可能

11111111 

2222222

3333333


    

16、テキストを隠す2つの方法

p{
    font-size:0;
} 

p{
        text-indent:-1000;
} 
    

17、画像はサイズを指定した後、どのように比例を維持するか

img {
    object-fit:cover;    contain
}

18、背景虚化

div {
    filter:blur(2px)
}

19、幅の設定

div {
    width:fill-available; //    block
} 

div {
        width:fill-content; //    inline-block
} 

20、link状態設定手順

link     ，              
a:link a:visited a:hover a:active

21、font-size基準

ブラウザのデフォルトフォントサイズは16 pxです.まず、データムフォントサイズを10 pxに設定できます.

body {font-size:62.5%;}

以降はフォント単位としてemを統一し,2.4 emは24 pxを表す.

h1 {font-size: 2.4 em}

22、画像でマークする

デフォルトでは、ブラウザはリストフラグとして黒い輪を使用し、画像の代わりに使用できます.

ul li {
    background-image: url("path-to-your-image"); 
    background-repeat: none;
     background-position: 0 0.5em; 
}
    

23、IEのテキストスクロールをキャンセルする

textarea { overflow: auto; }

24、白黒画像

カラー写真を白黒の画像に変えます

img.desaturate { 
    filter: grayscale(100%); 
     -webkit-filter: grayscale(100%);
     -moz-filter: grayscale(100%); 
     -ms-filter: grayscale(100%); 
     -o-filter: grayscale(100%);
 }  
     

25、notでスタイルをキャンセルする

一般的に、エレメントにスタイルを追加すると、最初に追加されます.その後、私たちが望んでいないエレメントスタイルをキャンセルします.

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

/* remove border */.nav li:last-child { border-right: none;}

直接使用可能:not()擬似クラス実装

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

26、マウスクリックを無効にする

css3  ，               
   .disabled { pointer-events: none; }

27、曖昧テキスト

.blur { 
    color: transparent; 
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
    
    

28、ユーザーのテキスト選択を禁止する

 div {user-select: none; /* Standard syntax */}