移动端小技巧

一 ：margin-top和margin-bottom值，对内联元素没有影响。padding-top和padding-bottom值，在内联中，不改变元素的尺寸，但背景颜色会改变。

二： img固定高度或者宽度，img图片会自动等比缩放。

三 ：li a的点触事件，在移动端，a的点触高度偏小，方法：设置a为block元素，并设置高度。

四：在ios和上android上，系统会自带默认的样式。-webkit-appearance:none;这个方法改变ios上系统默认自带的样式。

五：当ul 嵌套了3个li时，出现不能整除，在手机端右边会留了一段空隙。方法：设置父级元素的边框为1px，消除左边两边的边框，将背景颜色设置和最后一下li中的背景颜色。

六：html title 加载图片  <link href="./images/favicon.ico" rel="icon" type="image/x-icon"/>

七：在移动浏览器上，-webkit-overflow-scrolling:touch;实现快读滚动的效果。

八：背景图片的引用路径：../上一级目录，../../上上级目录

九：购物中，div点击失效的效果，在div中，添加一个用于判断的class，以此来标记此div不能点击，在js中，只要出现此class时，不能产生效果。例：

 <div id="detail-infoColor" class="detailInfor">
            <span>颜色</span>           
            <div class="detailFir unable"><span>绿</span></div>
            <div class="detailFir "><span>无</span></div>
            <div class="detailFir"><span>无</span></div>
          
        </div>

 function colorChecked(obj){
      var unable=$(obj).attr("class");

      unable=unable.split(" ");

      // alert(unable[1]);
      
      if(unable[1]==undefined){

      $("#detail-infoColor div").css("border","0");
      $(obj).css("border","1px solid red");

      }


    }

十：背景图片大小自适应：宽度固定，高度自适应

background-size: 320px auto;

十一：绝对定位或者fixed定位之后，div水平居中

div{position:fixed;top:0;left:0;right:0;margin:auto;z-index:999}

十二：在被选元素后面插入内容         1 after 外部 

$(selector).after(content)

        2 append 内部

$(selector).append(content)

        3 appendTo 内部

$(content).appendTo(selector)

十三：现在浏览器默认的大小为16px;
十四：溢出文本显示省略号效果

 text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

十四：文本缩进；

<pre code_snippet_id="193247" snippet_file_name="blog_20140422_8_8185838" name="code" class="css"> 
    <div class="mt12" style="padding-left:6em; text-indent:-6em">
        	<span class="col-888 w67">计费号码：</span>
            <span class="col-bla  zzcg-brt pb3">计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：计费号码：</span>
        </div>

;

十五：box-flex，宽度被内容撑开 只要在包含 box-flex样式属性的位置同时申明width:1px;即可。

.cp-inp-info-c {
    -webkit-box-flex: 1;
    box-flex: 1;
    width: 1px;
    
    
}

十六：箭头效果  利用字间的间距，CSS letter-spacing  

 

<strong class="gtlt"><<</strong>

.gtlt{font-family:simsun; letter-spacing:-.5em; *zoom:1; color:red;}

十七：当行图片文字垂直居中

<div id="buttons">
    <img  src="images/phone2.png" width="20"     >
    
    <a href="#" style=" font-size:24px;"  " >找回密码</a>
    <img  src="images/phone2.png"  >
    <img  src="images/phone2.png"   width="40" >
</div>

#buttons *{ vertical-align:middle;}

 十八：行内元素行换产生4px的bug，

十九：行高引起文字的间距消除：line-height:1;或者line-height=font-size; 二十：overflow:hidden属性，当未定位宽度时，div会自适应宽度。