CSS提供 visibility 属性来显示、折叠和隐藏一些HTML元素。可见性元素的用法非常简单，我们必须提供如下值 visible , hidden , collapse . 所有主要浏览器都支持visibility CSS属性，如Google Chrome、Mozilla Firefox、Opera、internetexplorer、microsoftedge和mobile版本。

null

语法

CSS可见性属性具有以下语法。

visibility: VALUE;

`可见性是我们将使用的属性。
`VALUE`是可以显示、隐藏和折叠的可见性属性值。

可见性属性可见值

我们可以通过设置 visible 对客户的价值 visibility CSS属性如下。这个 visible 值是 visibility 属性。因此，如果元素是可见的，我们不必设置 visible 值使其可见。

This Is The 1st Header
This Is The 2st Header
This Is The 3st Header
This Is The 4st Header
This Is The 5st Header
This Is The 6st Header
This Is The 7st Header
This Is The 8st Header

CSS Visibility Attribute Visible Value — CSS可见性属性可见值

可见性属性隐藏值

我们也可以通过使用 visibility 属性。我们将设置值 hidden 对于可见性属性，如下所示。在下面的示例中，我们将设置 h1 元素不可见。

This Is The 1st Header

This Is The 2st Header

This Is The 3st Header

This Is The 4st Header

This Is The 5st Header

This Is The 6st Header

This Is The 7st Header

This Is The 8st Header

Visibility Attribute Hidden Value — 可见性属性隐藏值

我们可以从截图中看到H1元素是隐藏的，但是它们的位置和区域没有塌陷。

可见性属性折叠

可见性属性也接受 collapse 对表行和列有用的值。通过使用此值，可以删除给定的行或列，并将空间用于其他元素。如果折叠值用于其他元素，则假定为 hidden .

NORMAL TABLE

İsmail	Baydan
Ahmet Ali	Baydan
Elif Ecrin	Baydan

COLLAPSED TABLE

İsmail	Baydan
Ahmet Ali	Baydan
Elif Ecrin	Baydan

继承

如果HTML文档是以分层方式设计的，并且我们希望使用父元素的visibility属性，那么我们可以使用 inherit 值或关键字，它将获取父值并为当前元素设置。

可见性与显示属性

还有一个名为 display 与“可见性”属性的功能类似。但有一个重要的区别。Visibility属性将只隐藏给定的元素，但它占用的空间将保留在另一侧 display 属性将完全删除给定的元素。在下面的示例中，我们将h2元素显示设置为 none 在h1元素只被设置为不可见或隐藏的地方，这些元素将被完全删除。