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结构:


     
           看！我只显示一行，多余的用省略号表示哟

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 结构

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:

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;}

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