상용 css3 기교

H5 모바일 프런트엔드 개발 공통 에너지 css3 요약
 
1. a탭의 하이라이트 클릭을 금지한다. 이것은 모두 비공식 속성이지만 실용성이 매우 강하다.
 

 html,body{
     -webkit-touch-callout: none; //           
     -webkit-user-select: none; //        
     -webkit-tap-highlight-color: rgba(0,0,0,0);//    a           
 }

 
 
2. 줄 레벨, 블록 레벨 요소가 가운데로 표시되기 전에 텍스트 가운데로 표시하는 방법은text-align:center입니다.line-height:x;만약 부모 요소의 높이가 알 수 없는 것이라면line-height가 오랫동안 확실하지 않다면, 다음 세 줄 코드는 부모 요소의 폭을 고려하지 않기 위해 당신을 위해 해결해 드리겠습니다.
 

section{ //   
     display: -webkit-box;    
    -webkit-box-align: center;
    -webkit-box-pack: center;

     }

 
 
3. 여분의 줄바꾸기 금지
html 구조:

<div class='word'>
      ！      ，          
 </div>    

 css:
 

.world{
    display:block; //             
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

 
 
4. 줄바꿈 고에너지 업그레이드 금지묘수를 쓰다
 

.world{
    font-size:2.4rem; 
    line-height:130%;
    height: 7.0rem;
    line-height: 130%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; //      
    -webkit-box-orient: vertical;

}

 
 
5. 리니-height를 백분율로 제어하기;이동단은 px를 최대한 적게 사용하고 백분율로 더 정확하게 라인 - height:100%;//두 줄 문자 사이에 빈틈이 없다. PSD를 디자인할 때 우리는 먼저 글자 번호가 얼마나 되는지 본다. 예를 들어 24px.문자의 간격, 예를 들어 10px;그러면 라인-height=100%+(10/24)*100%;이러한 줄 간격이 가장 정확하고 각종 장치에 응답한다
 
6.flex를 사용하여 float 대체
html 구조
 

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

 
css
 

ul{
    display: -webkit-box; 
    display: box; 
    display: -webkit-flex; 
    display: flex; 
    display: -webkit-flex-box; 
    display:flex-box;  
}
li{
    -webkt-flex:1; 
    flex:1; 
    -webkit-box-flex:1; 
    box-flex:1; 
}

 
7. 문자에 사선을 긋는다. 우리는 문자에 가로선을 긋는 것이 text-decoration:line-through라는 것을 안다.그러나 기본적으로 사선을 긋는 속성이 없습니다. 이것은 전자상거래 사이트에 자주 사용됩니다. 예를 들어 원가를 사선으로 긋는 데 사용됩니다.
 

.diagonal:before{
    position: absolute;
    content: "";
    left: 0; 
    top: 42%;
    right: -10%;
    border-top: 2px solid;
    border-color: #333;
    transform: rotate(8deg);
    -webkit-transform: rotate(8deg);
}

 
8. 글꼴 크기 사용 vw 번호 사용 변천 px->em->rem->vw
 

             
vw             
   
 .a{
   font-size:10vw;//                        
  }
  vw                                           

 
9. 1px의 가는 선을 그린다
html:

<div class='border1px'></div>

css
 

.border1px{  position: relative;}
.border1px:after{
    content:"";
    position: absolute;
    bottom:0px;
    left:0px;
    right:0px;
    border-bottom:1px solid red;
    border-left:1px solid red;
    -webkit-transform:scaleY(.5);
    -webkit-transform-origin:0 0;
}

 
10. 더 많이 알고 있을 테니 공유해