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>

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

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