一、display屬性系列一

1、display:none 不顯示
2、display:inline 行內(nèi)顯示
3、display:block（[塊內(nèi)]容器模式） 換行顯示
4、display:inline-block 行內(nèi)顯示

二、效果

1538015532(1).jpg

注意事項(xiàng)

1、display:inline和display:inline-block 雖然顯示效果是一樣的。
不同點(diǎn)：display:inline設(shè)置寬、高無效 display:inline-block設(shè)置寬、高有效
2、display:block 設(shè)置寬、高有效

三、display屬性系列二

1、display：flex 彈性布局

配合屬性

1、flex-direction：row：水平排列 row-reverse：水平翻轉(zhuǎn)排列
column：豎直排列 column-reverse：豎直翻轉(zhuǎn)排列
2、flex-wrap ：nowrap（不換行，默認(rèn)值） wrap（換行） wrap-reverse（與wrap的效果相反）

注意事項(xiàng)

1、屏幕寬度最大為750rpx ，當(dāng)布局寬度大于此，則會壓縮，自動調(diào)整各個子布局的寬高
2、flex-wrap ：如果不想壓縮顯示，則使用此屬性，換行顯示

四、效果

1538016971(1).jpg

1538017067(1).jpg

1538017107(1).jpg