H5移动端知识点总结

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 [code]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>[/code]2/通用的移动端设备的头部meta文件

<meta charset="utf-8">

<a href="tel:15602512356">打电话给:15602512356</a>4/[b]调用手机系统自带的邮件功能[/b]当浏览者点击这个链接时，浏览器会自动调用默认的客户端电子邮件程序，并在收件人框中自动填上收件人的地址下面<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:[b]#fff;}[/b]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的值的一个属性。 支持使用 "+","-","*" 和 "/" 四则运算。也就是使用数学表达式来动态的表示一个值。[b]注意：[/b]表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。[b].classname{margin:calc(100% - 20)}  //把margin值设置成了20px[/b]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;[code]box-orient:horizontal;

9.[b]box-direction 父元素中子元素的排列顺序。。。normal 正常| reverse反转 | inherit继承[/b]