css display属性详解

CSS display属性用于指定在页面上使用哪种盒模型来渲染指定的元素。通俗来讲就是某个元素在页面中的显示方式

none：元素完全从页面中移除。它的所有后代元素同样被移除。文档渲染的过程中就好像在文档树中这个元素不存在一样。
inline：显示为内联元素。
inline-block：显示为块级内联元素。它可以设置元素的宽度和高度，其它的行为和内联元素相同。
block：显示为块级元素。
list-item：该元素生成一个块级容器和单独的内联列表元素。
run-in：指定为

run-in

的元素的行为如下：
如果指定为

run-in

的元素包含一个块级元素，那么这个元素显示为块级元素。
如果指定为

run-in

的元素后面跟随一个非浮动或绝对定位的块级元素，那么

run-in

元素会成为这个块级元素的第一个内联元素。一个

run-in

元素不能运行在一个以

run-in

元素开始的块级元素前，或这个块级元素本身就是

run-in

元素。
其它情况下，

run-in

元素作为块级元素来显示。

inline-table, table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, and table-caption：这些值会将元素显示为表格。

inline-table

不是一个在HTML中直接映射的元素，它的行为和HTML 

<table>

元素相同，但是它是一个内联元素，而不是一个块级元素。
flex：元素显示为块级元素，它的内容根据Flexbox模式来进行布局。
inline-flex：元素显示为内联元素，它的内容根据Flexbox模式来进行布局。
grid：元素显示为块级元素，它的内容根据Grid模式来进行布局。
inline-grid：元素显示为内联元素，它的内容根据Grid模式来进行布局。