如何通过隐藏的亮点来增强您的网页设计

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

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

CSS可见性是什么?

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

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

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

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

不同的CSS可见性值

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

  • 在本地机器上创建一个文件夹。
  • 添加两个文件:index.htmlstyles.css
  • 在您最喜欢的编辑器中打开项目(我正在使用VS Code)

您可以使用以下命令:

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

下一步是连接index.htmlstyles.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;

  }

当页面被渲染时,带有RubyRuby 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:nonevisibility: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属性。

类似文章