1.none 不顯示元素。
2.block 顯示為塊狀元素。
3.inline 顯示為行內(nèi)元素甲喝。
4.inline-block 顯示為行內(nèi)塊虏两，創(chuàng)建一個(gè) BFC愧旦。
5.table-cell 顯示行為與 <td>一樣。垂直居中 https://codepen.io/twhy/pen/rwejpZ
6.flex flex 布局
7.grid grid 布局
一定罢、block笤虫，inline，inline-block 元素的區(qū)別是什么？
1. inline 元素不換行琼蚯，寬度由其內(nèi)容決定酬凳。設(shè)置 width, height 無效。如 span em strong 等遭庶。 設(shè)置水平方向 padding(padding-left, padding-right) 和 margin(margin-left, margin-right) 有效宁仔， 垂直方向的 padding(padding-top, padding-bottom)，margin(margin-top, margin-bottom) 無效罚拟。
2.block 元素獨(dú)占一行台诗，寬度沾滿父元素寬度〈退祝可以設(shè)置 width, height, padding, margin 屬性拉队。如 div p ul 等。 block 元素可以包含其他 block 元素和 inline 元素阻逮，比較特別的是 <p> 只能包含 inline 元素粱快。
3.inline-block 元素不換行，設(shè)置 width, height, padding, margin 屬性有效叔扼。 由于 inline-block 元素會產(chǎn)生新的 BFC事哭，因此可以包含浮動。
二瓜富、inline-block 常見的問題鳍咱。
inline-block 之間有空隙，因?yàn)閕nline-block 之間有空格与柑、Tab谤辜、換行符。解決的方法有：
1价捧、元素放在一行丑念，eg:ul 下的li放在一行。
2结蟋、給父元素設(shè)置 font-size: 0脯倚，在 inline-block 元素上重新設(shè)置 font-size。
3嵌屎、設(shè)置浮動float：left推正。
4、display：flex宝惰。
一般通用的是float和flex舔稀。
三、inline-block 導(dǎo)致父元素增高若干像素
可以通過給 inline-block 元素設(shè)置 vertical-align: top掌测。
eg: li {
vertical-align:top;
display:inline-block
}
