基础知识点
网页布局受三大因素影响
- 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 来了,相信网页布局春天也来了...