1/a,button,input,optgroup,select,textarea 等标签在点击的时候背景变暗，这时需要

在css加入如下代码即可：

a,button,input,optgroup,select,textarea{    -webkit-tap-highlight-color: rgba(0,0,0,0); } 这里面的optgroup是在select里面分组用的。 <select> <optgroup label="Swedish Cars"> //label就是这组的分类名字 <option value ="volvo">Volvo</option> <option value ="saab">Saab</option> </optgroup> <optgroup label="German Cars"> <option value ="mercedes">Mercedes</option> <option value ="audi">Audi</option> </optgroup> </select>2/通用的移动端设备的头部meta文件 <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> //强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览 <meta content="yes" name="apple-mobile-web-app-capable"> //iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； <meta content="black" name="apple-mobile-web-app-status-bar-style"> //指定的iphone中safari顶端的状态条的样式 <meta content="telephone=no" name="format-detection"> //不要把里面出现的数字当做手机号 <meta content="email=no" name="format-detection">//. 忽略Android平台中对邮箱地址的识别

3/在android或者IOS下 拨打电话代码如下：

<a href="tel:15602512356">打电话给:15602512356</a>

4/调用手机系统自带的邮件功能

当浏览者点击这个链接时，浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填上收件人的地址下面<p><a href="mailto:tugenhua@126.com">发电子邮件</a></p>

5/webkit表单输入框placeholder的颜色值改变：

默认的颜色，

-webkit-input-placeholder{color:#fff;}

:moz-placeholder{color:#fff;}

::moz-placeholder{color:#fff;}

鼠标点击时的颜色，

input:focus::-webkit-input-placeholder{color:#fff;}

6、line-height行高。有单位和没单位的区别

line-height:26px; 表示行高为26个像素 line-heigth:120%;表示行高为当前字体大小的120% line-height:2.6em; 表示行高为当前字体大小的2.6倍 line-height:2.6;表示行高为当前字体大小的2.6倍和那个em是一样的。没有单位的就是继承

7、calc的基本用法

calc是css3新增的一个可以动态设置width  border  padding   margin   font-size的值的一个属性。 支持使用 "+","-","*" 和 "/" 四则运算。也就是使用数学表达式来动态的表示一个值。

注意：

表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。

.classname{margin:calc(100% - 20)}  //把margin值设置成了20px

box { background: #f60; height: 50px; padding: 10px; border: 5px solid green; width: 90%;/*写给不支持calc()的浏览器*/ width:-moz-calc(100% - (10px + 5px) * 2); width:-webkit-calc(100% - (10px + 5px) * 2); width: calc(100% - (10px + 5px) * 2); }8、display:box弹性盒子模型父元素设置这个属性之后，子元素就可以用下面的一些属性了，可以对子元素进行分块box-flex主要让子容器针对父容器的宽度按一定规则进行划分。下面的sectionOne，sectionTwo，sectionThree.分别在father这个父元素中占的比例是3.1.1.father{ width:600px; height:200px; display:-moz-box; display:-webkit-box; display:box; } .sectionOne{ background:orange; -moz-box-flex:3; -webkit-box-flex:3; box-flex:3; } .sectionTwo{ background:purple; -moz-box-flex:1; -webkit-box-flex:1; box-flex:1; margin:0px 50px; } .sectionThree{ -moz-box-flex:1; //如果把这块区域改成width=300px。那么就是先在父元素中拿出300px，剩下的按照3:1的比例分给另两个。 -webkit-box-flex:1; box-flex:1; background:green;}水平排列 div 元素的子元素：

box-orient:horizontal(水平)|vertical（垂直）用来确定父容器里的子容器的排列方式，是水平还是垂直 /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; /* Safari、Opera 以及 Chrome */ display:-webkit-box; -webkit-box-orient:horizontal; /* W3C */ display:box; box-orient:horizontal;9.box-direction 父元素中子元素的排列顺序。。。normal 正常| reverse反转 | inherit继承