基础知识点
网页布局受三大因素影响
- display
- float
- position
下面是每个属性对应的不同值
| display | position | float |
|---|---|---|
| inline | static | left |
| block | relative | right |
| inline-block | abolute | |
| flex | fixed |
方法论
提示：这里不详细叙述每个值的含义和相关用法，而是提供一个学习的思路
如果要布局，我会怎么选？以下是使用优先级
- flex
- inline-block
- float
- positon
解释：flex 可以解决各种布局情况，根据骰子例子可以看出，而且使用起来很方便。 而后边三点优先级是根据使用的难易排序，我觉得 inline-block 更适合思维方式，float 比 position 好一点。（排除具体场景，单单论述可共同实现的场景）
以下是由浅入深的教程资源：
总结
听说新出的 Grid 会有更好的布局喔，可以和 flex 相互补充。不过由于还没有普及，所以这里暂时先不介绍了。
最后想吐槽一下前端的布局，在pc、Android、网页的布局里面，我觉得 PC 端布局最好用，直接拖拽，用线瞄准，那叫一个爽呀，3岁小孩都会！接着就是Android的布局，现在也可以拖拽了，可是还没有像 PC 那么好用，不过它的 LinearLayout、RelativeLayout，简单易用，可以秒杀所有你想要的布局有木有？！最后就是 网页 布局了，想弄个居中布局都得搞半天，不过 flex 来了，相信网页布局春天也来了...
