前端布局学习指南

基础知识点

网页布局受三大因素影响

1. display
2. float
3. position

下面是每个属性对应的不同值

display	position	float
inline	static	left
block	relative	right
inline-block	abolute
flex	fixed

方法论

提示：这里不详细叙述每个值的含义和相关用法，而是提供一个学习的思路

如果要布局，我会怎么选？以下是使用优先级

1. flex
2. inline-block
3. float
4. positon

解释：flex 可以解决各种布局情况，根据骰子例子可以看出，而且使用起来很方便。 而后边三点优先级是根据使用的难易排序，我觉得 inline-block 更适合思维方式，float 比 position 好一点。（排除具体场景，单单论述可共同实现的场景）

以下是由浅入深的教程资源：

1. 基础CSS布局（基础布局，看这个就够了）
2. flex语法篇、flex实例篇（这里介绍阮一峰的教程）
3. 这时，你看完flex以后，可能还是一脸懵逼，没关系，因为你需要练习，以下练习保证你能学会：
   • flex练习游戏1（小青蛙）
   • flex练习游戏2（defence）

总结

听说新出的 Grid 会有更好的布局喔，可以和 flex 相互补充。不过由于还没有普及，所以这里暂时先不介绍了。

最后想吐槽一下前端的布局，在pc、Android、网页的布局里面，我觉得 PC 端布局最好用，直接拖拽，用线瞄准，那叫一个爽呀，3岁小孩都会！接着就是Android的布局，现在也可以拖拽了，可是还没有像 PC 那么好用，不过它的 LinearLayout、RelativeLayout，简单易用，可以秒杀所有你想要的布局有木有？！最后就是 网页 布局了，想弄个居中布局都得搞半天，不过 flex 来了，相信网页布局春天也来了...