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>
你一定知道的更多 也分享下吧

 

技术
©2019-2020 Toolsou All rights reserved,
JVM内存模型(面试自用)2021年2月中国编程语言排行榜【操作系统----Linux】常用杀毒软件详解ubuntu14.04如何设置静态IP排序(一)冒泡排序法JS 的骚操作漫画 | CPU战争40年,真正的王者终于现身!python中解决字典写入列表的问题C语言控制台小游戏,打砖块SpringBoot实践(五):mybatis-plus中的BaseMapper,Iservice和ServiceImpl