1、模仿百度输入框
image.png
image.png
让xy浮起来，这里看到输入框input和xy直接还有空隙（原因是两者之间有回车）
这个空隙在不同浏览器、不同字体下等是不一样的
为了解决，我们在外面再加个span
image.png
不想内联里的内联之间有缝隙，就让其内容display用inline-block显示 问题：
image.png
相互之间有缝隙
方法一，让这2个都进行左浮
image.png
没有缝隙了，但是其父级wrapper为什么没有塌陷呢？（按照理论应该要加clearfix），因为wrapper的父级body里有display:flex（自带BFC功能）
接下里细节美化
输入框的宽高，边框颜色等
image.png
.inputWrapper input[type="text"]:focus{
outline:none;
border-color:#4b94fc;
}
解决光标内边距
image.png
加padding-left
接下来做2个icon
image.png
image.png
太大了，改样式
image.png
image.png
image.png
image.png
两边高对齐，除了设置
image.png
还可以在他们2个的爸爸上面直接加display:flex
image.png
自动补全
http://jsbin.com/soxamofuja/edit?html,js,output
2、做图片上传
以前的图片上传
image.png
image.png
image.png
可以去除image下面的空隙
image.png
获取图片数据，然后通过ajax向后台发请求，省了步骤（图片选中了，还要点提交）
http://jsbin.com/xorezebudu/edit?html,js,output
注意CSS的层及JS
3、美化按钮
image.png
行高可以不写，因为按钮标签会自动居中它的文字
但是如果是a标签（要加display:inline-block，因为inline元素是不接受宽高的）,文字就会上去
image.png
接下来做涟漪效果
image.png
visibility作用：默认不显示，用户点击了才显示样式（放大10倍）
pointer-events作用：这个circle是有一定大小的，这里是让用户最好不要点到circle，点击事件监控的是button
image.png
问题：这里我们希望点击出现涟漪的时候，文字不会遮挡，即文字在涟漪颜色的上面
解决：让父级button的z-index不为auto，让涟漪的z-index为-1即可，这里是堆叠上下文的问题
需求：涟漪结束之后就应该消失
image.png
http://jsbin.com/tucipipudo/edit?html,css,js,output
