전방 개발 상용 css 정리

css 속성이 많고 css3에 추가된 것이 많아서 개발 과정에서 누락된 것이 있을 수 있습니다. 때로는 번거로운api 문서를 뒤적거리고 싶지 않기 때문에 자주 사용하는 css 양식을 정리하여 기록해서 뒤적일 수 있습니다!
1. 단일행 문자는 수직으로 가운데에 위치한다.

            ，        ，        


.row {
    display: block;
    height: 100px;
    line-height: 100px;
    width: 600px;
    background-color: #d5effc;
}

2. 여러 줄 문자는 수직으로 가운데에 위치한다.

    

                ，        ，        ，        ，        ，        ，        ，        ，        


.wrap {
    display: table;
    width: 600px;
    height: 150px;
    background-color: #f780a4;
}
                
#content {
    display: table-cell;
    vertical-align: middle;/**    **/
}

3. 단일행 텍스트 오버플로우

 
          ，      ，      ，      ，      ，      ，      ，      ，      ，      ，      ，      ，      ，      ，      ，      ，      ，      ，       


 .text-overflow {
    width: 200px;/**       **/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-overflow: ellipsis;
    /* IE/Safari */
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* Opera */
    -moz-binding: url("ellipsis.xml#ellipsis");
    /*FireFox*/
    background-color: #f4cd89;
}

4. 텍스트 내용 자동 줄 바꿈

.word-break{
    word-wrap: break-word; 
    word-break: normal; 
}

5. 여러 줄 텍스트 오버플로우

    webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         ，webkit         
  

.more-text-overflow {
    width: 600px;
    display: -webkit-box;
    -webkit-line-clamp: 3;/*     ,         */
    -webkit-box-orient: vertical;
    overflow: hidden;
    background-color: #dcf791;
}

6. 테이블 테두리 설정

 table,table th,table td{
    border:1px solid #999;
    border-collapse: collapse;
}

7. hr 가느다란 테두리

hr{
    height: 1px; background:#ccc; border:0;
}

8. 모바일 기기는 링크와 그림 팝업 메뉴를 길게 누르는 것을 금지한다

a, img {
  -webkit-touch-callout: none; 
}

9.div의 스크롤 효과가 ios에서 원활하지 않은 해결 방법

div{
    -webkit-overflow-scrolling: touch;
}

또는 iscroll을 사용합니다.js
10, 핸드폰 지우기 페이지 탭 클릭 시 하이라이트

* {
     -webkit-tap-highlight-color: rgba(0,0,0,0);
}

11. 사용자가 선택한 내용의 스타일 변경

::selection{
    color:red;//        
    background-color:gray;//          
}

::-moz-selection{
    color:red;//        
    background-color:gray;//          
}

12. 사용자가 텍스트 내용을 선택하지 못하게 한다

.content {
    -webkit-user-select:none;
    -moz-user-select:none;
    -o-user-select:none;
    user-select:none;
}

본문에 만약 착오가 있으면, 아낌없이 가르침을 주십시오, 감사합니다!
전단 개발 과정에서 다른 css 양식을 만나면 본문을 정리할 수 있습니다. 만약에 자주 사용하는 css 양식이 본문에서 언급되지 않았다면 댓글로 여러분께 공유할 수 있습니다!