Web前端的学习之路

前言
最近好久都没有写博客了，可能是因为公司项目业务需求变少，也可能是我个人心里的一些放松。从公司5月份裁掉安卓客户端负责人之后，我就顺利成了安卓的负责人，但是薪资待遇却和之前一样没有变化，然后又不敢跳槽，才会出现现在这种学习热情底下，每天昏昏沉沉的感觉。
作为一名安卓开发，有那么多年的工作经验，但是有一些技术知识却只会使用，在面试的时候却无法真正的说清楚，这就会导致面试过程的吃亏。所以我打算在目前的工作岗位上学习Web知识，为大前端开发做准备，下面我就我个人对前端的一些学习经历，希望能对大家有帮助。
孔子说，三人行，必有我师焉。我在网上找了一个经历和我大致相同的人作为我的老师。《Web前端入门的自学路线》，根据这个学习路线，我大致掌握了前端开发的知识结构。
看完这个项目之后，我一定对web开发技术架构有了大致的了解，但是如果要真正的开发，我心里还是有许多不明所以的地方。

1）前端页面如何排版？还有就是我们写的web页面如何兼容手机客户端？
2）访问网络使用jQuery的Ajax异步请求如何实现页面的刷新？
3）web前端开发基础知识的掌握情况，怎么才能证明对基础知识有一定程度的掌握？
4）有没有比较好的初级项目可以练手？

作为一个安卓开发程序员，很大程度上被开源项目的增多影响，很大程度上我们开发都是在拷贝别人的代码，而不是自己静心去思考一个功能该如何去实现。
但是有句话说的是“学我者生，像我者死”，我们不能拘泥于实现一个功能，按部就班的去抄袭别人的功能代码，而不自己去思考。
作为我们最基础的Html学习，除了需要熟练掌握便签以外，我们还需要掌握页面元素之间的排版，web页面的排版通过Css的position属性来进行定位元素的位置：【JavaScript】div+css定位position详解。

1）float可以设置标签脱离文档流，也就是从文档的左上角开始从上往下依次进行排版。
2）relative相对定位：它现在移动的参照物就是它原来所占据的位置。
3）absolute绝对定位：定位的参照物是文档本身，相对于文章左上角的绝对位置。

但是在实际开发中，我们需要让控件居中显示，也就是左右两边的间距相一致，那么这时我们应该怎么定位呢： 《总结：前端开发中让元素居中的方法》。
其实这里我们会有一个误区，就是安卓开发，我们设置布局居中显示只要选择水平或者垂直布局，然后设置元素剧中显示就行，很多时候，我们设置的外层布局都是matchParent的，这样也可以很好的适配手机布局界面。但是在Web开发中，我们如果设置外层的布局是填充父窗体，然后设置里面的控件居中显示就可以了。
Android studio可以预览布局界面，现在开发起来发现这是一个非常好的优势，但是web开发必须要使用浏览器才能预览界面布局，但是我发现HBuilder这款IDE也有预览界面的功能，非常适合初期的web开发界面学习。
我们可以通过更改源码来预览变化，来了解一些CSS样式属性的作用，这样的学习效率是非常高的。下面是一些Css属性样式的问题：

display: flex;
display: -ms-flexbox;

一、flex的浏览器内核兼容写法
{ 
    display:-webkit-flex; 
    display:-moz-box;
    display:-mz-flexbox;
    display:flex; 
}
 
二、容器上的六个属性、容器内的子项目上的六个属性
①、容器上的六个属性：

       flex-direction: 决定子项目主轴的方向（默认值为row）

       flex-wrap: 决定子项目是否换行（默认值是不换行nowrap）

       flex-flow: direction wrap的合并写法

       justify-content: 决定子项目(水平)横向布局方式（默认值flex-start）

       align-items: 决定子项目(垂直)纵向布局方式（默认值stretch）

       align-content: 子项目有多列时，决定子项目的纵向布局方式（默认值flex-start）

②、容器内的子项目的六个属性：

       order: 设置子项目的顺序(默认为0)

       flex-grow:  子项目是否可扩大（默认为0，不扩大）

       flex-shrink:   子项目是否可缩小（默认为1，可缩小）（0是false,1是true）

       flex-basis:  设置子项目的初始宽度（默认为auto）

       flex: grow、shrink、basis合并

       align-self: 设置子项目(垂直)纵向方向的位置（默认值stretch）

positon:absolute属性和flxed属性定位原理一样都是相对于Dom界面左上角的相对位置，不同的是fixed属性可以让标签固定不跟随滑动。