常用css3技巧
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.你一定知道的更多 也分享下吧
常用css3技巧的更多相关文章
- html5基础的常用的技巧
html5基础的常用的技巧 1. 新的Doctype声明 XHTML的声明太长了,我相信很少会有前端开发人员能手写出这个Doctype声明. <!DOCTYPE html PUBLIC &quo ...
- java与.net比较学习系列(1) 开发环境和常用调试技巧
最近因为公司项目要由.net平台转到java平台的原因,之前一直用.net的我不得不开始学习java了,刚开始听到说要转java的时候很抗拒,因为我想专注在.net平台上,不过这样也并不完全是坏事,通 ...
- Matlab常用小技巧及部分快捷键
Matlab常用小技巧一: 1. m文件如果是函数,保存的文件名最好与函数名一致,这点都很清楚.不过容易疏忽的是,m文件名的命名尽量不要是简单的英文单词,最好是由大小写英文/数字/下划线等组成.原因是 ...
- vim常用操作技巧与配置
vi是linux与unix下的常用文本编辑器,其运行稳定,使用方便,本文将分两部分对其常用操作技巧和配置进行阐述,其中参考了网上的一些文章,对作者表示感谢 PART1 操作技巧 说明: 以下的例子中 ...
- DevExpress Report 其他常用设计技巧
原文:DevExpress Report 其他常用设计技巧 1 设置默认的打印纸张及页边距 选择Report-打开属性窗口,设置默认边距(Margins)和默认纸张(PaperKind). 2 修改R ...
- iOS开发之Xcode常用调试技巧总结
转载自:iOS开发之Xcode常用调试技巧总结 最近在面试,面试过程中问到了一些Xcode常用的调试技巧问题.平常开发过程中用的还挺顺手的,但你要突然让我说,确实一脸懵逼.Debug的技巧很多,比如最 ...
- javascript的40个网页常用小技巧
下面是javascript的40个网页常用小技巧,对网站开发人员相信会有帮助.1. oncontextmenu="window.event.returnValue=false" 将 ...
- MATLAB之折线图、柱状图、饼图以及常用绘图技巧
MATLAB之折线图.柱状图.饼图以及常用绘图技巧 一.折线图 参考代码: %图1:各模式直接成本预测 %table0-table1为1*9的数组,记录关键数据 table0 = data_modol ...
- 常用CSS3属性整理
常用CSS3属性整理 文本 文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 no ...
随机推荐
- SNF微信公众号客户端演示-微信开发客户端能干什么
关注测试微信号: 关注后菜单页面如下: 一.扫描二维码进行订单查询演示 1.点击菜单“软件产品”->选择“扫描查询” 2.扫描如下二维码进行订单查询演示. 3.扫描结果如下: 二.微信“输入订单 ...
- chrome 版本 29.0.1547.76 m 解决打开新标签页后的恶心页面的问题
个人非常不喜欢这个版本的新标签页的样子,特别是一再输入框中输入要搜索的东西,自动跑到标题栏中去了,比吃屎还恶心.下面是解决办法: 在地址栏输入:chrome://flags/ 按Ctrl+F,输入下面 ...
- springboot 中使用Druid 数据源提供数据库监控
一.springboot 中注册 Servlet/Filter/Listener 的方式有两种,1 通过代码注册 ServletRegistrationBean. FilterRegistration ...
- 精确光源(Punctual Light Sources)
<Physically-Based Shading Models in Film and Game Production>(SIGGRAPH 2010 Course Notes) (地址: ...
- eclipse 创建Maven 架构的dynamic web project 问题解决汇总
Eclipse创建Maven结构的web项目的时候选择Artifact Id为maven-artchetype-webapp,点击finish之后,一般会遇到如下问题 1. The superclas ...
- Atitit 图像处理 halcon类库的使用 范例边缘检测 attilax总结
Atitit 图像处理 halcon类库的使用 范例边缘检测 attilax总结 1.1. 安装halcon11 ..体积大概1g压缩模式1 1.2. Halcon的科技树1 1.3. 启动 &qu ...
- 10个Python面试常问的问题
概述 Python是个非常受欢迎的编程语言,随着近些年机器学习.云计算等技术的发展,Python的职位需求越来越高.下面我收集了10个Python面试官经常问的问题,供大家参考学习. 类继承 有如下的 ...
- Angular 4.0从入门到实战
AngularJS 优点 模板功能强大丰富,并且是声明式的,自带了丰富的Angular指令: 是一个比较完善的前端MVC框架,包含模板,数据双向绑定,路由,模块化,服务,过滤器,依赖注入等所有功能: ...
- fpm制做mysql-5.6.33 rpm包
增加用户: # groupadd -r mysql # useradd -g mysql -r -s /sbin/nologin -M -d /data/my_db mysql 源码安装mysql-5 ...
- Nginx 权限问题
At my job we are moving to Nginx for the load balancing of our sites. Nginx is a very powerful load ...