一、display属性系列一

1、display:none 不显示
2、display:inline 行内显示
3、display:block（[块内]容器模式） 换行显示
4、display:inline-block 行内显示

二、效果

1538015532(1).jpg

注意事项

1、display:inline和display:inline-block 虽然显示效果是一样的。
不同点：display:inline设置宽、高无效 display:inline-block设置宽、高有效
2、display:block 设置宽、高有效

三、display属性系列二

1、display：flex 弹性布局

配合属性

1、flex-direction：row：水平排列 row-reverse：水平翻转排列
column：竖直排列 column-reverse：竖直翻转排列
2、flex-wrap ：nowrap（不换行，默认值） wrap（换行） wrap-reverse（与wrap的效果相反）

注意事项

1、屏幕宽度最大为750rpx ，当布局宽度大于此，则会压缩，自动调整各个子布局的宽高
2、flex-wrap ：如果不想压缩显示，则使用此属性，换行显示

四、效果

1538016971(1).jpg
1538017067(1).jpg
1538017107(1).jpg
参考
1、https://blog.csdn.net/u013673799/article/details/70157294/ ---王梵
河马过河微信公众号.jpg