네가 알아야 할 간단하고 쉬운 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 {
        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. 텍스트를 숨기는 두 가지 방법

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 기준
브라우저의 기본 글꼴 크기는 16px입니다. 먼저 기본 글꼴 크기를 10px로 설정할 수 있습니다.

body {font-size:62.5%;}

뒤에 em를 글꼴 단위로 통일하고 2.4em는 24px를 나타낸다.

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 */}