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.用百分比控制line-height;

 移動端應盡量少使用px，用百分比控制更精确

 line－height:100%;//兩行文字之間無空隙

 使用：當拿到設計PSD時 我們先看字号是多少，比如24px; 文字的間距，比如10px; 那麼line-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;但是預設沒有劃斜線的屬性，這個常用于電商網站比如将原價用斜線劃掉

這裡我們用到before

.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>      

.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.display:inline-block 間隙去除

.wrapper{
　　font-size:0
 }      

.inlineblock{
    display: inline-block;  
    letter-spacing: normal;
    word-spacing: normal;
}

<div class='wrapper'>
    <div class="inlineblock"></div>
</div>      

你一定知道的更多 也分享下吧