H5移动前端开发常用高能css3汇总-阿里云开发者社区

开发者社区> frontman> 正文

H5移动前端开发常用高能css3汇总

简介: 1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强  html,body{ -webkit-touch-callout: none; //禁止或显示系统默认菜单 -webkit-user-select: none; //禁止长按复制选择 -webki...
+关注继续查看

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>

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

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
JavaScript、PHP、Golang、Haskell、Elixir,哪个才是最佳编程语言?
  在过去的几年里,我有机会尝试了多种不同的编程语言。   我非常喜欢学习不同的语言、方法和范式。我是一个充满好奇心的人,一直对编程语言十分着迷。每种编程语言都是不同的,在本文中,我们来讨论一下以下五大编程语言的优点以及缺点。
1 0
从时延毛刺问题定位到 Netty 的性能统计设计(上)
从时延毛刺问题定位到 Netty 的性能统计设计(上)
1 0
飞天加速计划使用体验-我的前端学习
学习云服务器的使用,让自己的网页上云。
15 0
程序员真的是吃青春饭吗?如何面对传说中的 35 岁职业焦虑?
  正走在这条路上的你或许也曾想过这些问题。这一次,力扣邀请到了《高效制胜——程序员面试典型题解》作者吴江(迈克老师),分享他 35 岁跳槽,并拿到了技术负责人 Offer,实现收入增长的故事和面试准备经验。   — 01 —   “35 岁危机”真有那么可怕吗?   在 2018 年快过春节的时候,我们部门突然被通知要开一个会,会上通知我们部门要在明年的这个时候被整体裁掉。我在这家五百强外企已经待了五年,当时虽然有这个预感,但是真的听到正式通知时,不免还是感觉有点震惊。
1 0
后端缓存的23个关键关注点(2)
后端缓存的23个关键关注点(2)
4 0
为 React 项目工作四年后,我理解了企业开源的真谛
  对企业而言,发布和维护开源项目都是需要耗费大量心力的。在为 React 工作四年后我对此深有体会。我最开始只是一名外部贡献者,加入 React 团队后,又从工程师做起,最终升为团队管理。和大多数的 Facebook 开源项目一样,React 起初只是为内部使用而开发的,见识到它在简化 UI 代码的开发和维护上的作用后,我们决定将它与全世界分享。   事实证明,React 是 Facebook 的一次令人难以置信的成功,而这成功背后也隐藏了巨大的挑战。举例来说,尽管 React 非常受欢迎,但它仍处于一个竞争激烈的领域,这使得我们在开发新版本时需要小心再小心。
1 0
程序员为什么要持续学习(升级版)
程序员为什么要持续学习(升级版)
3 0
互联网创业公司的技术团队构建
互联网创业公司的技术团队构建
1 0
+关注
52
文章
1
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载