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 屬性的值

總結

以上是生活随笔為你收集整理的元素的显示visibility/display的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。