首页 >> 新闻动态 >> Web 前端中display: none 和 visibily: hidden 区别?

新闻动态

联系我们

邮箱：

手机：15383239821

前端设计

Web 前端中display: none 和 visibily: hidden 区别?

作者：发布时间：2026-04-10 点击：

理解 display: none 和 visibility: hidden 之间的区别对于前端开发至关重要。这两个 CSS 属性看起来可能会产生相似的结果——都能隐藏元素，但它们在实现上有着显著的不同。在本文中，我将详细探讨它们之间的区别，并提供示例代码片段来帮助读者更好地理解。

1. display: none

display: none 是一种 CSS 属性，用于完全从渲染中移除元素，即使在 DOM 中仍然存在。当应用 display: none 时，元素不会在页面上占用空间，也不会对页面布局产生影响。具体来说，它的行为包括：

1）元素不会被渲染在页面上，无论是内容还是空间。

2）元素的尺寸和位置被移除，其他元素会填补它原来的位置。

3）事件处理程序不再适用于隐藏的元素。

4）元素及其子元素的 CSS 样式都不会应用，因为元素本身不再存在于渲染树中。

示例代码：

<!DOCTYPE html>

<html>

<head>

<title>display: none 示例</title>

<style>

.hidden {

display: none;

}

</style>

</head>

<body>

<div>

这是一个被隐藏的元素。

</div>

<div>

这是一个普通的元素。

</div>

</body>

</html>

在上面的示例中，.hidden 类被应用于一个 <div> 元素，使其使用 display: none 属性。因此，被隐藏的元素不会在页面上显示，也不会占用空间。

2. visibility: hidden

与 display: none 不同，visibility: hidden 只是将元素设置为不可见，但仍然会在页面上占据其原来的空间。元素仍然存在于渲染树中，但其内容和大小对用户不可见。具体来说，它的行为包括：

1）元素在页面上占据空间，即使它是不可见的。

2）元素的内容不可见，但它仍然会影响页面布局。

3）事件处理程序仍然适用于隐藏的元素。

4）元素及其子元素的 CSS 样式仍然应用，只是元素内容不可见。

示例代码：

<!DOCTYPE html>

<html>

<head>

<title>visibility: hidden 示例</title>

<style>

.hidden {

visibility: hidden;

}

</style>

</head>

<body>

<div>

这是一个被隐藏的元素。

</div>

<div>

这是一个普通的元素。

</div>

</body>

</html>

在上面的示例中，.hidden 类被应用于一个 <div> 元素，使其使用 visibility: hidden 属性。因此，被隐藏的元素仍然占据空间，但其内容不可见。

3. 区别和适用场景

虽然 display: none 和 visibility: hidden 都可以用于隐藏元素，但它们之间有一些关键的区别：

1）布局影响：display: none 将会完全从布局中移除元素，而 visibility: hidden 则会保留元素的布局空间。因此，根据需求选择适当的属性来隐藏元素至关重要。

2）事件处理：当使用 display: none 时，元素及其子元素的事件处理程序将被移除，而使用 visibility: hidden 时，事件处理程序仍然有效。

3）动画效果：如果你希望通过 CSS 动画隐藏或显示元素，通常会选择 visibility: hidden，因为它可以保留元素的布局空间，并且可以在动画过程中保持该空间。

4. 总结

在前端开发中，理解 display: none 和 visibility: hidden 的区别是至关重要的。通过选择适当的属性来隐藏元素，可以确保页面布局的正确性，并在需要时保留事件处理程序的功能。因此，根据具体的需求和设计目标，选择合适的隐藏方式是十分重要的。

上一篇：Nuxt4简介
下一篇：Display:none做SEO隐藏文字可行吗

新闻资讯