likes
comments
collection
share

常见考题-CSS中到底应该怎么隐藏元素呢？

作者站长头像
站长
· 阅读数 12

CSS中到底应该怎么隐藏元素呢？

这是一个经典的前端面试CSS考题。通常我们正常学习，编写代码，就会知道，display：none;,opacity:0;,还有一个overflow:hidden。这三种在我们编写代码的时候频繁用到。那么我就先聊一聊这三种隐藏元素的方法。

display：none

display: none; 是一种常用的隐藏元素的方法，它可以将元素从文档流中移除，并且不占据空间。这意味着该元素不会影响其他元素的布局。同时，该元素也不会响应鼠标事件和键盘事件，因为它已经被从文档流中移除了。

使用 display: none; 隐藏元素会导致该元素被完全移除，因此在需要重新显示该元素时，需要重新创建元素并添加到文档中，这可能会影响性能。使用 display: none; 隐藏元素会影响屏幕阅读器和搜索引擎的访问，因为它们无法读取该元素的内容。因此，在使用 display: none; 隐藏元素时，需要确保该元素的内容对用户不重要，或者提供其他的无障碍方案。 我们可以看到Box2出现一直是在1和三之间，当2消失，3会占据2的位置，出现又会把3往回赶，这就是我们说的从文档流中移除了，不影响其他元素。但是这样页面的性能会下降，进行重绘和回流。

opacity:0;

opacity:0; 是一种 CSS 样式规则，它用于控制元素的透明度。将元素的 opacity 属性设置为 0 可以使元素完全透明，即不可见。这在需要隐藏某些元素，但又不想完全隐藏它们的情况下非常有用。例如，在需要实现动画效果时，可以将元素的 opacity 属性从 1 逐渐减少到 0，从而实现元素的淡出效果。

opacity:0; 是 CSS 中设置元素透明度的一种方式。它可以让元素变为完全透明，即不可见。opacity 属性的取值范围是 0 到 1，0 表示完全透明，1 表示不透明。当我们把元素的 opacity 属性设置为 0 时，虽然元素不可见，但它仍然占据着页面布局中的位置，并且可以被点击和选择，因此在有些情况下可能不太适合使用。

另外，还有一种设置元素透明度的方式是使用 rgba() 函数，它可以在设置颜色的同时设置透明度。例如，background-color: rgba(255, 255, 255, 0.5); 表示白色半透明的背景色，其中最后一个参数表示透明度，取值范围也是 0 到 1。与 opacity 属性不同的是，使用 rgba() 函数设置元素透明度时，元素的子元素也会受到影响。

在这个例子中，我们创建了一个红色的正方形盒子，并且给它添加了 opacity: 1; 的样式。然后，我们为盒子定义了一个 .hidden 类，它将 opacity 属性设置为 0，这样就可以隐藏盒子了。我们还使用了 CSS 过渡效果，使盒子的隐藏和显示动画更加平滑。

在 JavaScript 中，我们定义了两个函数 hideBox 和 showBox，它们分别通过添加和移除 .hidden 类来隐藏和显示盒子。当我们点击“隐藏盒子”按钮时，盒子就会渐渐消失，因为它的 opacity 值从 1 变成了 0。当我们点击“显示盒子”按钮时，盒子又会渐渐出现，因为它的 opacity 值从 0 变成了 1。

总之，使用 opacity: 0; 可以非常方便地实现隐藏元素的效果，并且可以通过 CSS 过渡效果来让隐藏和显示更加平滑。 在这个例子里，我们可以看到，使用opacity:0;隐藏元素，被隐藏的元素仍然在原来的位置，与上面的display: none;差别很大，这种可以减少页面的重绘和回流。

overflow:hidden

overflow:hidden 是一种 CSS 属性，它可以用于隐藏元素的溢出部分，即超出元素大小的部分。这个属性通常用于控制容器元素的内容溢出，使得容器元素能够正常显示。当内容超出容器大小时，超出的部分将被裁剪，并不会被显示出来。这个属性在一些布局场景中非常有用，比如在实现滚动效果时，可以通过设置 overflow:hidden 来隐藏超出容器大小的部分，从而实现滚动效果。

在使用 overflow:hidden 时，需要注意以下几点：

  1. 该属性只能用于块级元素和表格单元格元素，不能用于行内元素。
  2. 当设置 overflow:hidden 时，元素的溢出部分会被裁剪掉，如果你希望看到完整内容，可以使用滚动条来查看。如果你不想使用滚动条，可以使用 overflow:scroll 来实现滚动条。
  3. 当设置 overflow:hidden 时，如果元素的子元素超过了父元素的大小，那么子元素的溢出部分也会被裁剪掉。如果你希望显示子元素的全部内容，可以将子元素的大小调整为不超过父元素大小。
  4. 当设置 overflow:hidden 时，如果元素的子元素设置了 position:absolute，那么子元素的溢出部分也会被裁剪掉，这时可以考虑使用 position:relative 来解决这个问题。

这个例子，我设置了两个盒子，用来区分差别定义了一个 .container 类和一个 .container1 类，其中 .container 类使用了 overflow: hidden 属性来隐藏超出容器范围的内容，.container1 类则没有使用该属性，因此容器内的内容可能会在容器外部显示。

除了这常见三种，还有好多种。我这里再举一种，visibility:hidden

因为visibility:hidden也是面试题中经常看见的，只不过我没怎么用过。 之前看到这样一道面试题。分析比较 opacity: 0、over-flow:hidden、visibility: hidden、display: none 的区别和优劣。

先看一看visibility:hidden

visibility: hidden 是一个 CSS 属性，它可以隐藏一个元素，使其在页面上不可见。与 display: none 不同，visibility: hidden 仍然占据空间，即该元素仍然在页面上占有其原来的位置和大小，只是不可见而已。这意味着，当你将一个元素的 visibility 属性设置为 hidden 时，它仍然会对页面布局产生影响，因为它仍然占据空间。与 opacity: 0 不同，visibility: hidden 会将元素完全隐藏，包括其内容，而 opacity: 0 仅仅是将元素变为透明，但其内容仍然可见。

在这个例子里，

第一个盒子我采用的是visibility:hidden进行隐藏元素，我们发现给它添加了点击事件，并没有用。visibility:hidden不能响应交互。

第二个盒子就是正常盒子，进行对照。

第三个盒子利用display: none;隐藏元素，因为脱离了文档流，所以外面想交互也不能去实现。

而第四个盒子我采用了opacity: 0，可以进行交互。点击它，它的js代码可以交互，进而出现。

而第五个盒子overflow: hidden，我们可以看到它里面的文字被隐藏了部分。同时因为它是存在文档流，当我们点击它没有隐藏的部分，是能够进行交互的。

整体分析总结

当我们想要隐藏一个元素时，有几种方法可供选择，包括使用visibility: hidden、opacity: 0和display: none属性。这些属性之间有一些区别，具体如下：

  1. visibility: hidden

当元素的visibility属性设置为hidden时，元素将被隐藏并且不再占据布局空间，但是该元素及其子元素将无法响应用户交互事件。这意味着，如果您想在隐藏元素的同时允许用户与其交互，则应该使用其他属性，例如opacity: 0或者将元素的display属性设置为none。

  1. opacity: 0

当元素的opacity属性设置为0时，元素将被隐藏，但仍然占据布局空间，并且该元素及其子元素仍然可以响应用户交互事件。这意味着，如果您想隐藏元素但仍然允许用户与其交互，则可以使用opacity: 0属性。

  1. display: none

当元素的display属性设置为none时，元素将被隐藏，不再占据布局空间，并且该元素及其子元素将无法响应用户交互事件。这意味着，如果您想隐藏一个元素并且不希望它占据布局空间或与用户交互，则可以使用display: none属性。

总之，您应该根据您的需求选择适当的属性来隐藏元素。如果您希望隐藏元素但仍然允许用户与其交互，则可以使用opacity: 0属性。如果您想要隐藏元素并且不希望它占据布局空间或与用户交互，则可以使用display: none属性。如果您只是想隐藏元素但仍然希望它占据布局空间，则可以使用visibility: hidden属性。

而overflow: hidden平常用来隐藏文本较多。。它是一种 CSS 属性，用于控制元素内容的溢出部分的显示方式。当元素的内容超出了容器的大小时，可以使用 overflow: hidden 属性来隐藏超出容器的内容。这在一些设计中很有用，比如当你想隐藏一个元素的部分内容，或者在制作轮播图时，想要隐藏超出容器的图片。但是，它并不能实现交互，如果你想要在隐藏的元素上进行交互，需要使用 JavaScript 来实现。