元素的显示visibility/display

visibility

visibility 属性虽然会隐藏元素，但会保留元素在页面中所占的空间。

值	描述
visible	默认值，表示元素是可见的
hidden	隐藏元素
collapse	主要用来隐藏表格的行和列，隐藏的行或列所占的空间可以被其他表格内容使用；如果在其他元素上使用，其效果等同于“hidden”
inherit	从父元素继承 visibility 属性的值

display

通过 display 属性可以设置元素是否显示以及如何显示。

值	描述
none	隐藏元素
block	将元素设置为块级元素
inline	将元素设置为内联元素
list-item	将元素设置为列表项目
inline-block	将元素设置为行内块元素
table	将元素设置为块元素级的表格（类似<table>）
inline-table	将元素设置为内联元素级的表格（类似<table>）
table-caption	将元素设置为表格的标题（类似<caption>）
table-cell	将元素设置为表格的单元格（类似<td>和<th>）
table-row	将元素设置为表格的行（类似<tr>）
table-row-group	将元素设置为表格的内容部分（类似<tbody>）
table-column	将元素设置为表格的列（类似<col>）
table-column-group	将元素设置为表格中一个或多个列的分组（类似<colgroup>）
table-header-group	将元素设置为表格的头部（类似<thead>）
table-footer-group	将元素设置为表格的脚（类似<tfoot>）
box	CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最老版本）
inline-box	CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最老版本）
flexbox	CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的过渡版本）
inline-flexbox	CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的过渡版本）
flex	CSS3 中新增的属性值，表示将对象设置为弹性伸缩盒（伸缩盒的最新版本）
inline-flex	CSS3 中新增的属性值，表示将对象设置为内联元素级的弹性伸缩盒（伸缩盒的最新版本）
run-in	根据上下文来决定将元素设置为块级元素或内联元素
inherit	从父元素继承 display 属性的值