[总结]CSS/CSS3常用样式与web移动端资源

2019年9月6日 103次阅读来源: 风雨后见彩虹

`css/css3常用样式`

CSS修改选中文字的颜色

html代码：

<p class="p1">第一段文字选中效果</p>
<p class="p2">第二段文字选中效果</p>

css代码：

.p1::selection{background:red;color:#fff;}
.p2::selection{background: black;color:red;}

选中文字后的效果如图所示：
《[总结]CSS/CSS3常用样式与web移动端资源》

强制文本显示

单行显示语法：white-space:nowrap;
让一段文字在固定宽度在一行显示，最后一个字符为省略标记(…)，css样式如下

div{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

多行文本最后省略号：

div{
  display: -webkit-box; 
  -webkit-line-clamp:2;
  overflow: hidden; 
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}

这里用到了文本溢出显示省略号的，即设置溢出文本显示为省略标记：

语法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增加的）;

clip：表示直接裁切溢出的文本；
ellipsis：表示文本溢出时，显示省略标记(…)，省略标记代替最后一个字符；
ellipsis-word：表示文本溢出时，也是显示省略标记(…),不同的是，省略标记代替的是最后一个词)

zoom:1的原理和作用

语法：zoom：normal | <number> | <percentage>
取值：

normal：使用对象的实际尺寸。
<number>：用浮点数来定义缩放比例。不允许负值
<percentage>：用百分比来定义缩放比例。不允许负值

兼容性：
《[总结]CSS/CSS3常用样式与web移动端资源》

例子：

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>zoom_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
body{line-height:1.5;}
h1{margin:0;font-size:16px;font-family:Arial;}
.test{zoom:normal;}
.test2{zoom:5;}
.test3{zoom:300%;}
</style>
</head>
<body>
<h1>zoom:normal</h1>
<div class="test">zoom:normal</div>

<h1>zoom:5</h1>
<div class="test2">zoom:5</div>

<h1>zoom:300%</h1>
<div class="test3">zoom:300%</div>
</body>
</html>

谷歌与IE浏览器结果如图所示（Firefox不支持）：
《[总结]CSS/CSS3常用样式与web移动端资源》

参考地址：http://www.css88.com/book/css/properties/user-interface/zoom.htm

Zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。

在平常的css编写过程中，zoom:1能够比较神奇地解决ie下比较奇葩的bug。

譬如外边距（margin）的重叠，譬如浮动的清除，譬如触发ie的 haslayout属性等等。

（重点）当设置了zoom的值之后，所设置的元素就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。

ie下子元素浮动时候父元素不随着自动扩大的问题，使用下面的CSS写法：

.父元素 {   overflow: auto; zoom: 1   }

css ie6、ie7中overflow:hidden无效解决办法

产生原因：
当父元素的直接子元素或者下级子元素的样式拥有position:relative 属性时，父元素的overflow:hidden 属性就会失效。

解决办法：
我们在IE 6、7 内发现子元素会超出父元素设定的高度，即使父元素设置了overflow:hidden。
解决这个bug很简单，在父元素中使用 *position:relative; 即可解决该bug。

表格语法

<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=图片路径>...</table>背景图片的URL=就是路径网址
<table border=边框大小>...</table>设定表格边框大小(使用数字)
<table bgcolor=颜色码>...</table>设定表格的背景颜色
<table borderclor=颜色码>...</table>设定表格边框的颜色
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)
<table cols=参数>...</table>指定表格的栏数
<table frame=参数>...</table>设定表格外框线的显示方式
<table width=宽度>...</table>指定表格的宽度大小(使用数字)
<table height=高度>...</table>指定表格的高度大小(使用数字)
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

设置表格中的td宽度固定table-layout:fixed

table{table-layout:fixed;}

语法：table-layout:automatic | fixed | inherit

automatic：默认。列宽度由单元格内容设定。
fixed：列宽由表格宽度和列宽度设定。
inherit：规定应该从父元素继承 table-layout 属性的值。

合并表格边框border-collapse:collapse

table{border-collapse:collapse;}

语法：border-collapse:separate | collapse | inherit

separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit：规定应该从父元素继承 border-collapse 属性的值。

例如：

table{border-collapse:collapse;}
table, td, th{border:1px solid black;}

CSS text-transform控制文本的大小写

描述：text-transform 属性控制文本的大小写。

语法：text-transform:none | capitalize | uppercase | lowercase | inherit

none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。
inherit 规定应该从父元素继承 text-transform 属性的值。

text-stroke

[ text-stroke-width ]：设置或检索对象中的文字的描边厚度
[ text-stroke-color ]：设置或检索对象中的文字的描边颜色

text-stroke(文本描边)和text-fill-color(文本填充色)注意点：

目前这两个属性只有webkit内核的Safari和Chrome支持，例如：

.box{-webkit-text-stroke: 3.3px #2A75BF;}

text-fill-color：颜色值，和color属性差不多都是文字的样式；

注意：同时使用text-fill-color和color属性，text-fill-color将覆盖color属性的颜色值；

text-fill-color可以使用透明值，即：text-fill-color：transparent

text-shadow

.box{text-shadow:0px 0px 0px #333333;}

属性值依次：水平方向位移（支持负值）、垂直方向位移（支持负值）、模糊半径、阴影颜色
text-shadow对同一个text，可设置多个阴影，与box-shadow类似，使用逗号”,”分割，前一个设置效果在后一个设置效果之上。
box-shadow 参考：http://www.cnblogs.com/lhb25/…

box-shadow

为了兼容各主流浏览器并支持这些主流浏览器的较低版本，在基于Webkit的Chrome和Safari等浏览器上使用box-shadow属性时，我们需要将属性的名称写成-webkit-box-shadow的形式。Firefox浏览器则需要写成-moz-box-shadow的形式。全面的写法：

.box-shadow-6{  
    box-shadow:-10px 0 10px red, /*左边阴影*/  
    10px 0 10px yellow, /*右边阴影*/  
    0 -10px 10px blue, /*顶部阴影*/  
    0 10px 10px green; /*底边阴影*/  
}

参考地址：http://blog.csdn.net/freshlov…

letter-spacing字符间距

letter-spacing 属性增加或减少字符间的空白（字符间距）。
例如： letter-spacing: 2px;

textarea去掉右侧滚动条，去掉右下角拖拽

<TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA>

css中透明度兼容代码

div{filter: alpha(opacity=80);opacity:0.8;}

根据input的type来控制css样式

1.用css中的type选择器

input[type="text"]{ background-color:#FFC;}

2.用css的expression判断表达式

input{ background-color:expression(this.type=="text"?'#FFC':'');}

3.用javascript脚本实现(觉得没必要，省略…)

css3设置字体

@font-face{
    font-family: myFirstFont;
    src: url('Sansation_Light.ttf'),
        url('Sansation_Light.eot'); /* IE9+ */
}
div{
    font-family:myFirstFont;
}

网页字体设置

font-family:'YourWebFontName';
src:url('YourWebFontName.eot'); /* IE9 Compat Modes */
src:url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
    url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */}

参考地址：《css学习笔记 – 网页中导入特殊字体@font-face属性详解》

css强制性换行

div{
  word-break:break-all; /*支持IE，chrome，FF不支持*/
  word-wrap:break-word;/*支持IE，chrome，FF*/
}

CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效，不识别)

:nth-child(2)选取第几个标签，“2可以是你想要的数字”
:nth-child(2n)选取偶数标签，2n也可以是even
:nth-child(2n-1)选取奇数标签，2n-1可以是odd
:nth-child(3n+1)自定义选取标签，3n+1表示“隔二取一”

css3实现背景颜色渐变

background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);

第一个参数：设置渐变的起始位置
第二个参数：设置起始位置的颜色
第三个参数：设置终止位置的颜色

IE 浏览器
IE浏览器实现渐变只能使用IE自己的滤镜去实现

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);

第一个参数：渐变起始位置的颜色
第二个参数：渐变终止位置的颜色
第三个参数：渐变的类型
0 代表竖向渐变 1 代表横向渐变

css3的RGB颜色和HSL颜色， IE8不识别rgba写法

其中RGB颜色的原理是通过定义不同的红绿蓝色值来组成一个颜色。color:rgb(254,2,8);
其中HSL是通过色相、饱和度、亮度模式来申明颜色的。color:hsl(359,99%,40%);

如果需要设置透明背景则可以用到他们：

background-color:hsla(0,0%,100%,0.8);
background-color:rgba(255,255,255,0.8);

不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。
background-color:rgba(0,0,0,0.5)，此写法解决opacity带来的元素也透明问题，但IE8低版本浏览器不支持。

初始化em，u的斜体

em,u{font-style: normal;}

媒体查询功能

一般写法：

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

应该有人会发现上面这段代码里面有个screen，他的意思是在告知设备在打印页面时使用衬线字体，在屏幕上显示时用无衬线字体。但是目前我发现很多网站都会直接省略screen,因为你的网站可能不需要考虑用户去打印时，你可以直接这样写：

@media (max-width: 960px){
    body{
        background: #000;
    }
}

其中css2的媒体查询：

<link rel="stylesheet" type="text/css" media="screen" href="style.css">

我们想知道移动设备是不是纵向放置的显示屏，可以这样写：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

我们把第一段的代码也用CSS2来实现，让它一样可以让页面宽度小于960的执行指定的样式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">

但是上面这个方法，最大的弊端是他会增加页面http的请求次数，增加了页面负担，我们用CSS3把样式都写在一个文件里面才是最佳的方法。

下面的写法是实现尺寸等于480px：

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
  /*自己添加的样式*/
}

其中对于-webkit-min-device-pixel-ratio作如下解释：

-webkit-min-device-pixel-ratio为1.0

所有非Retina的Mac
所有非Retina的iOS设备
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S

-webkit-min-device-pixel-ratio为1.3

Google Nexus 7

-webkit-min-device-pixel-ratio为1.5

Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation

-webkit-min-device-pixel-ratio为2.0

iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
所有Retina displays 的MAC
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X

样式实现三角形

div{
  position:absolute;
  left:50%;
  bottom:0;
  margin-left:-10px;
  width:0;
  height:0; 
  border-width:10px;
  border-style:solid dashed dashed dashed;
  border-color:transparent transparent #71151c transparent;
}

css3水平垂直居中

div{
  display: box; 
  display: -webkit-box; 
  display: -moz-box; 
  -webkit-box-pack:center; 
  -moz-box-pack:center; 
  -webkit-box-align:center; 
  -moz-box-align:center; 
}

css3属性 -webkit-filter(改变模糊度亮度透明度等方法)

-webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。

现在规范中支持的效果有：

grayscale 灰度值为0-1之间的小数
sepia 褐色　　　　　　值为0-1之间的小数
saturate 饱和度　　　　值为num
hue-rotate 色相旋转　　值为angle
invert 反色　　　　　　值为0-1之间的小数
opacity 透明度　　　　　值为0-1之间的小数
brightness 亮度　　　　值为0-1之间的小数
contrast 对比度　　　　值为num
blur 模糊　　　　　　值为length
drop-shadow 阴影

用法是标准的CSS写法，如：

-webkit-filter: blur(2px);

使用方法：（配合动画使用）

.jaguar-con-show img.jaguar-con-imglast{               
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
}
.jaguar-con-show img.jaguar-con-imglast{   
    -webkit-filter: blur(3px) brightness(.6);
    -moz-filter: blur(3px) brightness(.6);
    -o-filter: blur(3px) brightness(.6);
    -ms-filter: blur(3px) brightness(.6);    
    filter: blur(3px) brightness(.5); 
    -webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    /*border: 3px solid #000;*/
}

CSS pointer-events

pointer-events原本来源于SVG，目前在很多浏览器中已经得到体现。不过，要让任何HTML元素生效还得借助于一点点css。该属性称之为pointer-events，基本上可以将它设置为auto，这是正常的行为，而“none”是一个有趣的属性。
如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面的元素.

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持这个CSS3属性，IE6/7/8/9都不支持，Opera在SVG中支持该属性但是HTML中不支持。

禁止button按钮的点击与禁止a标签的跳转

pointer-events:none禁止掉鼠标事件（css3属性）
禁止button按钮的点击：

<button type="button" class="btn btn-default btn-lg">默认按钮</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按钮</button>

button禁止点击的样式：

button{cursor: not-allowed;}

所以button用到了disabled=”disabled”与样式cursor: not-allowed

禁止a标签的跳转行为：

<a href="#" class="btn btn-default btn-lg" role="button">链接</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">禁用链接</a>

样式：

a{pointer-events: none;cursor:not-allowed}

参考地址：http://www.runoob.com/try/try.php?filename=bootstrap3-button-disabledstate
但是用到键盘tab键的时候出现a标签可以跳转，实现键盘tab也禁止a标签跳转参考地：
http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/

样式改变单词的大小写

首字母大写：text-transform:capitalize
全部大写：text-transform:uppercase
全部小写：text-transform:lowercasecase

<span style="text-transform:capitalize;" >this is a test!!!</span>
首字母大写<inputtype="text"style="text-transform:capitalize;">
全部大写<inputtype="text"style="text-transform:uppercase;">
全部小写<inputtype="text"style="text-transform:lowercasecase;">

html title属性内容换行方法

a.直接填写title内容时候“回车键”换行
b.使用html title换行代码
使用代码换行共两种代码，均可实现html标签内title内容显示时换行。
换行代码符合分别为：
“
”和“”
“
”拼写：&（and符号，键盘数字键7一起&）+ #（井号）+ 10（阿拉伯数字十）+ ;（小写分号）
“”拼写：&（and符号，键盘数字键7一起&）+ #（井号）+ 13（阿拉伯数字十三）+ ;（小写分号）
以上符合数字输入均必须英文半角模式输入。使用时候，在需要换行地方任选一种（组）换行符号代码即可。

移动端定宽布局，安卓上文字变大了解决办法

例如：

<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi" />

那么解决办法：给文字区外面的div设最大高度100%。

HTML5:input file控件限制上传文件类型

input file控件限制上传文件类型
文件类型中间用，分开
html和htm这样的要写成两个

<input type="file"  name="filePath" accept=".jpg,.jpeg,.doc,.docx,.xls,.xlsx,.pdf">

如果限制上传文件为图片类型，如下：

<input type="file" class="file" value="上传" accept="image/*"/>

去掉input聚焦,点击a标签，出现的外虚线框

input:focus{outline: none;}

CSS3 vw让overflow:auto页面滚动条出现时不跳动

传统的实现方式：

body { overflow-y: scroll; }

css3实现方式：

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或者：

.wrap-outer {
    padding-left: calc(100vw - 100%);
}

首先，.wrap-outer指的是居中定宽主体的父级，如果没有，创建一个（使用主体也是可以实现类似效果，不过本着宽度分离原则，不推荐）；
然后，calc是CSS3中的计算，IE10+浏览器支持，IE9浏览器基本支持(不能用在background-position上)；
最后，100vw相对于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！而100%是可用宽度，是不含滚动条的宽度。
于是，calc(100vw – 100%)就是浏览器滚动条的宽度大小（如果有，如果没有滚动条则是0）！左右都有一个滚动条宽度（或都是0）被占用，主体内容就可以永远居中浏览器啦，从而没有任何跳动！

参考地址：http://www.zhangxinxu.com/wor…

***以下内容将主要是在移动端使用的多***

`meta相关知识`

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

忽略将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 可选default、black、black-translucent -->

移动端viewport模板

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本以后，safari上已看不到效果,可以删除-->
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>viewport通用</title>
  <link style="text/css" rel="stylesheet" href="home.css">
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <!--页面内容-->
</body>
</html>

viewport模板 – target-densitydpi=device-dpi，android 2.3.5以下版本不支持

<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值与页面定义的宽度一致 -->

自己做移动端活动的时候常如下方式：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本以后，safari上已看不到效果,可以删除-->
  <meta content="black" name="apple-mobile-web-app-status-bar-style">
  <meta content="telephone=no" name="format-detection">
  <meta content="email=no" name="format-detection">
  <title>viewport通用</title>
  <script type="text/javascript">
    var phoneWidth = parseInt(window.screen.width);
    var phoneScale = phoneWidth / 750;
    var ua = navigator.userAgent;
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write('<meta name="viewport" id="vie" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" id="vie" content="width=750, target-densitydpi=device-dpi">');
        }
    } else {
        document.write('<meta id="vie" name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi, minimal-ui">');
    }
  </script>
  <link style="text/css" rel="stylesheet" href="home.css">
  <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <!--页面内容-->
</body>
</html>

`移动端问题总结`

移动端如何定义字体font-family

中文字体使用系统默认即可，英文用Helvetica，为什么呢，首先先看一下各平台的主流字体支持情况（来源网络，没有验证）！！！

各系统的默认字体和常用字体：
（表格稍后补上）
需要详细相关信息，可查看《兼容PC手机端字体》文章

结论

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持

代码：

/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

移动端touch事件(区分webkit 和 winphone)

当用户手指放在移动设备在屏幕上滑动会触发的touch事件

以下支持webkit

touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指
touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
touchend——当手指离开屏幕时触发
touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用

TouchEvent

touches：屏幕上所有手指的信息
targetTouches：手指在目标区域的手指信息
changedTouches：最近一次触发该事件的手指信息
touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息

参数信息(changedTouches[0])

clientX、clientY在显示区的坐标
target：当前元素

以下支持winphone 8

MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指
MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action:
none;}可以阻止默认情况的发生：阻止页面滚动
MSPointerUp——当手指离开屏幕时触发

移动端click事件有300 ms的延迟响应问题

历史原因：

2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。

双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。

原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案：

fastclick可以解决在手机上点击事件的300ms延迟，地址：https://github.com/ftlabs/fas…
zepto的touch模块，tap事件也是为了解决在click的延迟问题

触摸事件的响应顺序

1、ontouchstart 
2、ontouchmove 
3、ontouchend 
4、onclick

解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应

清除IOS系统手机对input等表单元素的默认样式

.css{-webkit-appearance:none;}

伪元素改变number类型input框的默认样式

input[type=number]::-webkit-textfield-decoration-container {
    background-color: transparent;    
}
input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
}
input[type=number]::-webkit-outer-spin-button {
     -webkit-appearance: none;
}

CSS美化Placeholder提示信息的样式兼容

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

手机对Placeholder提示信息都基本带有默认的样式，兼容各种浏览器的使用方式：

.css::-webkit-input-placeholder {color: #777;}    /* WebKit browsers */
.css:-moz-placeholder {color: #777;opacity: 1;}   /* Mozilla Firefox 4 to 18 */
.css::-moz-placeholder {color: #777;opacity: 1;}  /* Mozilla Firefox 19+ */
.css:-ms-input-placeholder {color: #777;}         /* Internet Explorer 10+ */

webkit表单输入框placeholder的文字能换行么

ios可以，android不行~

在textarea标签下都可以换行~

取消a,button等元素被触摸时产生的半透明灰色遮罩或者虚线框问题

a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}

-webkit-tap-highlight-color :当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时，覆盖显示的高亮颜色。

该属性可以只设置透明度。如果未设置透明度，iOS Safari使用默认的透明度。当透明度设为0，则会禁用此属性；当透明度设为1，元素在点击时不可见。

详细参考：《-webkit-tap-highlight-color》

关闭手机端横屏或者竖屏自动调整字体大小功能

ios使用-webkit-text-size-adjust禁止调整字体大小:

body{-webkit-text-size-adjust: 100%!important;}

text-size-adjust 设为 none 或者 100% 关闭字体大小自动调整功能。

android使用以下代码，该接口只在微信浏览器下有效:

/**
 * 页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小
 * 但是会有一个1秒左右的延迟，期间可以考虑通过loading展示
 * 仅供参考
 */
(function(){
    if (typeof(WeixinJSBridge) == "undefined") {
        document.addEventListener("WeixinJSBridgeReady", function (e) {
            setTimeout(function(){
                WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                    alert(JSON.stringify(res));
                });
            },0);
        });
    } else {
        setTimeout(function(){
            WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) {
                alert(JSON.stringify(res));
            });
        },0);
    }
})();

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

.css{-webkit-touch-callout: none}

-webkit-touch-callout 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

适用于：链接元素比如新窗口打开，img元素比如保存图像等等
取值：

none：系统默认菜单被禁用
inherit：系统默认菜单不被禁用

详细参考：《-webkit-touch-callout》

禁止ios和android用户选中文字

.css{-webkit-user-select:none}

当然pc端现在也在用禁止用户选中文字，兼容写法：

.test{
  -webkit-user-select:none;
  -moz-user-select:none;
  -o-user-select:none;
  user-select:none;
}

当然有时候pc上也直接写到html代码中，如：

<div class="test" onselectstart="return false;" unselectable="on">选择我试试，你会发现怎么也选择不到我，哈哈哈哈</div>

代码解释：

IE6-9不支持该属性，但支持使用标签属性 onselectstart="return false;" 来达到
user-select:none 的效果；Safari和Chrome也支持该标签属性；
直到Opera12.5仍然不支持该属性，但和IE6-9一样，也支持使用私有的标签属性 unselectable="on" 来达到user-select:none 的效果；unselectable 的另一个值是 off；
除Chrome和Safari外，在其它浏览器中，如果将文本设置为
-ms-user-select:none;，则用户将无法在该文本块中开始选择文本。不过，如果用户在页面的其他区域开始选择文本，则用户仍然可以继续选择将文本设置为
-ms-user-select:none; 的区域文本；
对应的脚本特性为userSelect。

打电话发短信，发邮件的怎么实现

打电话：<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信：winphone系统无效，<a href="sms:10086">发短信给: 10086</a>
发邮件：<a href="mailTo:10086@qq.com">10086@qq.com</a>

详细了解mailTo：移动web页面给用户发送邮件的方法 (邮件含文本、图片、链接)

移动端实现类似hover效果

移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活移动端css的active效果。

直接在body上添加ontouchstart，同样可激活移动端css的active效果，比较推荐这种方式，代码如下：

html代码：

<body ontouchstart>
</body>

css代码：

.btn:active{background-color: red;}

开启硬件加速

解决页面闪白，保证动画流畅

.css {
   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
}

android 上去掉语音输入按钮

input::-webkit-input-speech-button {display: none}

取消input在ios下，输入的时候英文首字母的默认大写

<input autocapitalize="off" autocorrect="off" />

如何阻止windows Phone的默认触摸事件

winphone下默认触摸事件事件使用e.preventDefault是无效的

目前解决方法是使用样式来禁用

html{-ms-touch-action: none;}/* 禁止winphone默认触摸事件 */

屏幕旋转的事件和样式

window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；

window.onorientationchange = function(){
    switch(window.orientation){
        case -90:
        case 90:
        alert("横屏:" + window.orientation);
        case 0:
        case 180:
        alert("竖屏:" + window.orientation);
        break;
    }
}

样式：

//竖屏时使用的样式
@media all and (orientation:portrait) {
.css{}
}

//横屏时使用的样式
@media all and (orientation:landscape) {
.css{}
}

IE10（winphone8）表单元素默认外观如何重置

禁用 select 默认下拉箭头

::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

select::-ms-expand {
    display: none;
}

禁用 radio 和 checkbox 默认样式

::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{
    display: none;
}

禁用PC端表单输入框默认清除按钮

当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。

input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{
    display: none;
}

Retina 显示屏的问题

retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个

在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍

那么，前端的应对方案是：

设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2

//例如图片宽高为：200px*200px，那么写法如下
.css{width:100px;height:100px;background-size:100px 100px;}

其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px

.css{font-size:20px}

移动端设置滚动条的默认样式

/* 设置滚动条的样式 */
::-webkit-scrollbar {
  width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
  border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  border-radius:10px;
  background:rgba(0,0,0,0.1);
  -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
  background:rgba(255,0,0,0.4);
}

为移动端页面中滑动滚动条的时候，添加惯性效果的方法

首先设置：

div{height:100%;overflow-y:auto;}

但是实际在 iPhone 上测试时，发现 Safari（也包括很多 iOS App 内置浏览器使用的 UIWebView）竟然完全禁用掉了著名的「惯性滚动」效果。

但解决方法是有的，令人吃惊的是还非常简单：只有一条 CSS 属性即可解决问题：

body{-webkit-overflow-scrolling:touch;}

有的同学添加了这一条属性后遇到了向下滑动后页面变成空白的问题，实际上可以通过一条 CSS 属性把页面加载到内存来解决：

body{-webkit-transform:translate3d(0,0,0);}

注：如果设置了-webkit-overflow-scrolling: touch;那么在IOS系统下对于改变滚动条的默认样式将失效，即上面一条所述。

移动端实现控制文本行数

div{
  display: -webkit-box;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

移动端使用flex让内容平均分配

htm代码：

<nav>
  <a href="#">a</a>
  <a href="#">b</a>
  <a href="#">c</a>
</nav>

css代码：

nav{display:-webkit-flex;display:flex;}
a{-webkit-flex:1;flex:1;}

更新于2017.06.02，逐步更新中…

    原文作者：风雨后见彩虹
    原文地址: https://segmentfault.com/a/1190000000410773
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

css/css3常用样式

CSS修改选中文字的颜色

强制文本显示

zoom:1的原理和作用

css ie6、ie7中overflow:hidden无效解决办法

表格语法

设置表格中的td宽度固定table-layout:fixed

合并表格边框border-collapse:collapse

CSS text-transform控制文本的大小写

text-stroke

text-shadow

box-shadow

letter-spacing字符间距

textarea去掉右侧滚动条，去掉右下角拖拽

css中透明度兼容代码

根据input的type来控制css样式

css3设置字体

网页字体设置

css强制性换行

CSS :first-child 选择器,:last-child选择器,nth-child(IE7,8无效，不识别)

css3实现背景颜色渐变

css3的RGB颜色和HSL颜色， IE8不识别rgba写法

初始化em，u的斜体

媒体查询功能

样式实现三角形

css3水平垂直居中

css3属性 -webkit-filter(改变模糊度 亮度 透明度等方法)

CSS pointer-events

禁止button按钮的点击与禁止a标签的跳转

样式改变单词的大小写

html title属性内容换行方法

移动端定宽布局，安卓上文字变大了解决办法

HTML5:input file控件限制上传文件类型

去掉input聚焦,点击a标签，出现的外虚线框

CSS3 vw让overflow:auto页面滚动条出现时不跳动

meta相关知识

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

忽略将页面中的数字识别为电话号码

忽略Android平台中对邮箱地址的识别

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

移动端viewport模板

移动端问题总结

移动端如何定义字体font-family

移动端touch事件(区分webkit 和 winphone)

移动端click事件有300 ms的延迟响应问题

触摸事件的响应顺序

清除IOS系统手机对input等表单元素的默认样式

CSS美化Placeholder提示信息的样式兼容

webkit表单输入框placeholder的文字能换行么

取消a,button等元素被触摸时产生的半透明灰色遮罩或者虚线框问题

关闭手机端横屏或者竖屏自动调整字体大小功能

禁止ios 长按时不触发系统的菜单，禁止ios&android长按时下载图片

禁止ios和android用户选中文字

打电话发短信，发邮件的怎么实现

移动端实现类似hover效果

开启硬件加速

android 上去掉语音输入按钮

取消input在ios下，输入的时候英文首字母的默认大写

如何阻止windows Phone的默认触摸事件

屏幕旋转的事件和样式

IE10（winphone8）表单元素默认外观如何重置

Retina 显示屏的问题

移动端设置滚动条的默认样式

为移动端页面中滑动滚动条的时候，添加惯性效果的方法

移动端实现控制文本行数

移动端使用flex让内容平均分配

`css/css3常用样式`

css3属性 -webkit-filter(改变模糊度亮度透明度等方法)

`meta相关知识`

`移动端问题总结`