关于wap页面的一些总结

　　css3一些属性

　　1.clip属性：前景图片也可以用spirt啦；

　　2.calc ： wap页面经常会遇到百分比 和 px 的计算，刚开始的解决方案是多套一层标签，现在有calc函数计算真是挺方便的，

　　　　　　 但是！！ pc的chrome是好好的没错，在手机上居然失效了，心情一下子down了啊，持续关注中~~~~

　　3.伪类：用伪类加小图标，> △ ......真方便~ ::before  ::after 真是好兄弟~

　　4.css3渐变gradient：有线性渐变和圆渐变 

　　5.transform-origin 可改变重心（旋点）

　　6.::-webkit-input-placeholder{color: ;} 设置placeholder的颜色

　　7.文字渐变 background-clip：text  background-gradient:(top left , #000 #999 )

　　8.代替 float:left的布局 父级设置 display：-webkit-box  子级设置 -webkit-flex-box：1 

　　9.选择器 非常实用，(:only-child  :empty) 内容过多，不一一列举 

　　10.动画 animation ，做过几个动画需求，内容颇多，不一一列举，用来用去就几个属性，但想用好不容易 ~~~~(>_<)~~~~ 

　　　 做过的例子：

　　　 a. http://sta.ganji.com/att/project/touch/year_summary/index.html (2014赶集年终大盘点)

　　　 b.http://sta.ganji.com/att/project/touch/house-100/index.html (2015房产 100%个人房源)

　　　 ......(要学习还太多，svg，canvas等等)

　　11.line-height：1.5 和line-height：150% 其实是不一样的，line-height：150%（子元素的高度=父元素的高度*150%）

　　　 line-height：1.5 行高=字高度的1.5倍

　　12.可用outline实现外边框  div{ border-radius:1px; box-shaow:0 0 0 5px #000;}

　　13.box-sizing:border-box;  盒子模型  忽略padding border 的大小

　　14.appearance:none 去除 表单的默认样式

　　15. text-overflow: ellipsis  overflow:hidden  white-space:nowrap; 超过出现...

 

　　项目中遇到的兼容性问题:

　　1.安卓浏览器 input type="number"的placeholder失效 ，可用type="tel" 代替

　　2.安卓浏览器 input type="text" 的placeholder line-height 如果设置值的话 会偏上不居中，需设置 line-height:normal;

　　3.元素有动画的不要用伪类写，安卓部分浏览器不支持伪类动画

　　4.label里面不要有两个input type="text" 

　　5.png24图片压缩有风险，一般的网上压缩都会破坏图片，导致iphone6或者其他设备图片花掉的问题

　　6.position: fixed; 困扰前端的大bug，底部横条有fixed ，页面又有输入框，输入框focus的时候，底部固定的横条就飘到中间去~~~~~（目前还没有方法解决！）

 

　　技巧：

　　1.是不是觉得有时候排图标很麻烦，写background-position的时候浪费不少时间，ps切片工具有个划分切片，

　　试试看，按方格排好icon，写background-position的速度嗖嗖的

　　2.左边图片 右边内容的布局不少见吧，右边内容的行数不限的时候，居中真是个麻烦，可以设置父级 display：table ，子级：display：table-cell 再设置居中 vertical-align: middle;就可以了。

　　之前用过这么一坨新特性写，同样，PC的chrome妥妥的，到移动设备就挂了

　　.box{

　　　　min-height: 75px;
　　　　display: -webkit-flex;
　　　　display: flex;
　　　　display: -ms-flexbox;
　　　　-webkit-flex-direction: column;
　　　　flex-direction: column;
　　　　-webkit-justify-content: center;
　　　　justify-content: center;

　　}

　　布局注意：

　　有时候一个psd包含了很多模块，但在实际情况中，有时候rd同学会隐藏或者删除一些模块，就会导致布局的错乱（多一条线，两个模块之间没有空隙....）,

　　切图的时候要注意不让这种情况发生。

 

　　第一篇blog，有缘人看到多指点，不断学习，不断发blog ~O(∩_∩)O哈哈~ 干巴爹