在 CSS 中，隐藏页面元素有多种方式，每种方式的实现原理不同，使用场景和效果也各有区别。常见的隐藏元素的方法包括 display: none、visibility: hidden、opacity: 0 和 position: absolute 等。下面我们将详细讨论这些方法的实现原理、区别，并通过实际项目代码示例讲解它们的使用场景。
1. display: none
介绍
display: none会完全从页面的渲染流中移除元素，即使该元素在 DOM 中依然存在，浏览器也不会为其分配空间。因此，隐藏的元素既不可见，也不会影响其他元素的布局。- 该方法对于需要彻底隐藏的元素非常有效，不会占用任何空间，其他元素将重新调整布局。
特点
- 隐藏的元素完全从文档流中移除，不占据任何空间。
- 对于
<input>等表单元素，隐藏后无法与用户进行交互。 display: none不会触发任何动画效果或过渡效果。
示例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>display: none 示例</title><style>.hide {display: none;}</style>
</head>
<body><div class="hide">这个元素被隐藏了</div><
