我们有很多CSS属性，要掌握所有这些属性可能是一项挑战。CSS可见性是您应该掌握的重要属性之一，如果您想成为熟练的Web开发人员。

在本文中，我将定义CSS可见性，解释其重要性，并列出并解释不同的CSS可见性值。

CSS可见性是什么？

CSS可见性属性可以隐藏或显示网页中的元素。例如，您可以在网页上有四个框，并使用可见性属性来确定它们的显示方式。如果将可见性设置为可见，则所有元素都将显示在页面上。

然而，如果元素被隐藏，它仍然占据空间，但会从最终的浏览器/屏幕中隐藏起来。

CSS可见性在以下情况下很重要：

• 可见性控制：您可以根据当前用户来控制应该显示什么。您可以将元素的可见性设置为仅在用户使用某个操作触发它时可见。例如，悬停或点击按钮。
• 布局保留：一个好的应用程序应该保留其布局和内容，无论屏幕大小如何。当您将元素的可见性设置为隐藏时，它仍然占据空间，但对最终用户不可见。这种方法可以保持一致的布局。
• 优化性能：当可见性属性设置为visibility:hidden时，浏览器不需要不断重新计算布局。然而，当使用display:none属性时，浏览器需要在您决定再次显示元素时重新计算布局。
• 创建动态和交互式用户界面：您可以将CSS可见性属性与其他属性（如不透明度）结合使用，创建淡入效果，动画和平滑的过渡效果。

不同的CSS可见性值

CSS可见性有五个可能的值。我将通过代码块和屏幕截图详细介绍。如果您想跟着做，请执行以下操作：

• 在本地机器上创建一个文件夹。
• 添加两个文件：index.html和styles.css。
• 在您最喜欢的编辑器中打开项目（我正在使用VS Code）

您可以使用以下命令：

mkdir -p CSS-visibility && cd CSS-visibility && touch index.html styles.css

下一步是连接index.html和styles.css文件。在部分的index.html文件中添加以下内容;

您现在应该在代码编辑器中有类似于此的内容;

可见

当您将元素的值设置为visibility:visible时，它将显示在网页上。这种可见性是默认的。我们可以在我们的HTML文档中有三个框来更好地理解这个概念。在您的index.html的部分中添加以下内容;

       Box 1 

       Box 2 

       Box 3 

    

我们现在可以使用以下CSS代码来为我们的div（框）添加样式;

.container {

    padding: 15px;

    width: max-content;

    display: flex;

    border: 1px solid black;

  }

  .box1,

  .box2,

  .box3 {

    height: 30px;

    width: 100px;

  }

  .box1 {

    background-color: rgb(224, 49, 209);

    margin-right: 15px;

  }

  .box2 {

    background-color: rgb(95, 234, 77);

    margin-right: 15px;

  }

  .box3 {

    background-color: rgb(154, 43, 12);

  }

当最终页面被渲染时，您将得到如下结果;

如果您将盒子的可见性设置为visibility: visible，它不会产生任何效果，因为所有盒子默认都是可见的。

然而，我们可以通过在一个盒子上使用display: none属性来演示可见性属性的工作原理。我们可以选择盒子3作为示例。将类.box3上的CSS代码更改为以下内容;

.box3 {

    background-color: rgb(154, 43, 12);

    display: none

  }

当您重新渲染页面时，您会注意到我们只有两个盒子，一个和两个。

如果您注意到，我们的.container元素的大小已经减小。当您使用display: none属性时，盒子3不会被渲染，它在我们的浏览器上的空间变得空闲，供其他盒子占用。

Hidden

当我们对一个元素应用visibility: hidden CSS属性时，它将对最终用户隐藏。然而，它仍然占用空间。例如，我们可以使用此属性隐藏Box2。

为此，将Box2的CSS代码修改如下;

.box2 {

    background-color: rgb(95, 234, 77);

    margin-right: 15px;

    visibility: hidden

  }

我们唯一做出的改变是添加了这一行;

visibility: hidden

最终页面将显示如下;

我们可以看到Box 1和Box 3之间有一个空间，因为Box 2元素仅隐藏。

如果我们检查渲染的页面，我们可以看到Box 2仍然在DOM中。

Collapse

折叠是应用于子元素的可见性值。HTML表格是我们可以应用visibility:collapse属性的完美示例。

我们可以添加以下代码在我们的HTML文件中创建一个表格;

        

          

          

        

        

          

          

        

        

          

          

        

        

          

          

        

   
编程语言
框架
JavaScript 
Angular 
Ruby 
Ruby on Rails
Python 
Django 

我们现在可以用1像素的边框样式化我们的表格。将以下内容添加到您的CSS文件中;

table {

    border-collapse: collapse;

    width: 50%;

  }

  th, td {

    border: 1px solid black;

    padding: 8px;

  }

当我们显示表格时，我们将得到以下结果;

我们现在将隐藏第二行以演示visibility: collapse属性的工作原理。将以下内容添加到您的CSS代码中;

.hidden-row {

    visibility: collapse;

  }

当页面被渲染时，带有Ruby和Ruby on Rails的行将被隐藏。

Initial

visibility: initial属性将一个HTML元素重置为其初始值。例如;

• 我们开始时显示了表格中的所有行。
• 我们折叠了第2行的值，因此隐藏了它。
• 现在，我们可以返回到初始值（显示它）

我们将添加一个切换显示和折叠值的按钮来演示这一点。

将以下可点击的按钮添加到您的HTML代码中;

点击我!!

我们可以添加一个JavaScript function，它在按钮被点击时查找.hidden-row类并在其上切换.visible-row类。

将以下代码添加到您的CSS文件中;

.visible-row {

    visibility: initial;

  }

当您点击显示的按钮时，可见性值将来回切换。

Inherit

visibility : inherit属性允许子元素从父元素继承display属性。

我们可以使用以下简单的代码来演示此属性的工作方式：

Inherit Demo

   

     
 Hidden

   

   
Visible (not inside a hidden element) 

 

如果你渲染页面，只有h1和p标签中的内容将被显示。然而，在

和

标签之间将存在表示隐藏元素的空格。

我们有一个div，将它的visibility属性设置为hidden。我们在div内部有一个

标签。我们设置

的visibility为inherit，这意味着它从它的父元素div继承。

然而，如果我们将div的属性设置为visible，

（其子元素）也将继承该属性。

Inherit Demo

    

      
 Hidden

    

    
Visible (not inside a hidden element) 

CSS visibility: hidden vs. display: none

display:none和visibility:hidden之间的主要区别在于前者完全将元素从布局中移除，而后者隐藏元素但仍占用空间。

我们可以使用以下代码来演示两者之间的区别：

    

        .box {

          display: inline-block;

          width: 100px;

          height: 100px;

          background-color: lightgray;

          margin-right: 20px;

        }

        .box1 {

          background-color: lightblue;

        }

        .box2 {

          background-color: black;

        }

        .container {

            padding: 10px;

            border :2px solid black;

            padding-left: 20px;

            width: 250px;

        }

      

    

    

      

        

        

      

如果我们渲染页面，我们将会看到两个并排的框：

display: none示例

将此代码添加到.box1类中：

display: none;

当你渲染页面时，你会注意到.box1不再显示。第二个框（黑色）也向左移动，占据了之前被浅蓝色框占据的空间。

visibility: hidden示例

不使用display: none，而是在.box1类中添加如下代码：

visibility: hidden

这个属性为box1保留了一些空间，但不显示它。另一方面，box2保持在原位。

display:none	visibility:hidden
完全从网页中删除一个元素	隐藏一个HTML元素，但仍占据网页中的空间
你可以为display:none的元素设置样式	你可以定位和设置visibility:hidden的元素样式
不能被屏幕阅读器访问	你可以使用屏幕阅读器访问visibility设置为hidden的元素

使用CSS可见性提高可访问性

你可以使用CSS可见性来隐藏对所有用户无关重要的元素。例如，你可以使用此功能隐藏一个仅对未登录用户可见的登录用户。你还可以有一个包含服务条款或版权信息的侧边栏或页脚。

我们可以使用以下代码来说明如何提高可见性;

  

    

    

      .login-form {

        display: none;

      }

      .login-text:hover + .login-form {

        display: block;

      }

      .login-form label {

        display: block;

        margin-bottom: 5px;

      }

      .login-form input {

        width: 30%;

        margin-bottom: 10px;

      }

    

  

  

    
登录

    

  

只有在悬停在第一个项目上时，登录表单才会变为可见状态。

结论

我们相信您现在可以在代码中舒适地使用CSS可见性属性，实现平滑的过渡并改善网页的可访问性。但是，您必须知道何时使用每个可见性值，以避免最终得到不流畅的页面。当您错误使用CSS可见性属性时，还可能向最终用户隐藏重要数据。

请查看我们的 CSS guides and resources 以了解更多与CSS可见性组合使用的CSS属性。