在 CSS 中，有多种方法可以隐藏页面元素。以下是几种常用的隐藏元素的方法：
使用 display: none
这是最常见的隐藏元素的方法。它会将元素从页面中完全移除，不会占用任何空间。元素上绑定的所有事件都没有响应。
css
.hidden {
display: none;
}使用 display: contents
这种方式隐藏元素，同时元素的其它CSS样式不会生效，但是它的子元素会正常显示
css
.hidden {
display: contents;
}但是，如果给它存在子元素，它的子元素会正常显示。
如果子元素绑定的有点击事件，则子元素的点击事件可以正常响应。如果在子元素的事件中不去阻止事件冒泡的话，父元素绑定的点击事件也会被触发。
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置元素隐藏</title>
<style>
</style>
</head>
<body>
<div id="div4" style="display: contents; background-color: blue; padding: 30px;">
<div id="div4-1" style="width: 100px; background-color: aqua;">11111</div>
</div>
<script>
const div4 = document.getElementById('div4')
const div41 = document.getElementById('div4-1')
div4.addEventListener('click', (event) => {
console.log('div4 clicked')
})
div41.addEventListener('click', (event) => {
// event.stopPropagation() // 阻止事件冒泡
console.log('div4-1 clicked')
})
</script>
</body>
</html>使用 visibility: hidden
这种方法隐藏元素，但元素仍然会占用页面空间，只是内容不可见。元素绑定的事件不会响应。
css
.hidden {
visibility: hidden;
}但是，如果给它存在子元素同时给子元素设置 visibility: visible;那么它的子元素会正常显示。
如果子元素绑定的有点击事件，则子元素的点击事件可以正常响应。如果在子元素的事件中不去阻止事件冒泡的话，父元素绑定的点击事件也会被触发。
xml
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>设置元素隐藏</title>
<style>
#div2 {
width: 100px;
height: 100px;
background-color: blue;
padding: 40px;
}
#div2-1 {
background-color: green;
visibility: visible;
}
</style>
</head>
<body>
<div id="div2" style="visibility: hidden">
<div id="div2-1">
33333333
</div>
</div>
<script>
const div2 = document.getElementById('div2')
const div21 = document.getElementById('div2-1')
div2.addEventListener('click', () => {
console.log('div2 clicked')
})
div21.addEventListener('click', (event) => {
// event.stopPropagation() // 阻止事件冒泡
console.log('div2-1 clicked')
})
</script>
</body>
</html>使用 opacity: 0
这种方法将元素的透明度设置为 0，使其不可见，但元素仍然会占用空间，并且仍然会对页面布局产生影响。
元素绑定的事件可以正常响应。
css
.hidden {
opacity: 0;
}使用绝对定位隐藏
通过将元素定位到屏幕外，使其不可见。
css
.hidden {
position: absolute;
left: -9999px;
}使用 height: 0 和 overflow: hidden
这种方法将元素的高度设置为 0，并隐藏溢出内容。
css
.hidden {
height: 0;
overflow: hidden;
}使用 visibility: collapse
这种方法类似于 visibility: hidden，但只适用于表格单元格（<td> 和 <th>）。它会隐藏单元格，但仍然保留表格的布局。
css
.hidden {
visibility: collapse;
}总结
display: none：完全移除元素，不占用空间，不响应事件display: contents: 隐藏元素。子元素正常显示，不响应自身事件，但是可以通过子元素事件冒泡响应自身事件visibility: hidden：隐藏元素，但保留空间。不响应自身事件，但是可以通过子元素事件冒泡响应自身事件opacity: 0：透明化元素，但保留空间和布局。- 绝对定位隐藏：将元素移动到屏幕外，保留布局。
height: 0和overflow: hidden：隐藏内容，但保留元素的高度为 0。visibility: collapse：适用于表格单元格，隐藏内容但保留布局。
选择哪种方法取决于你的具体需求，例如是否需要保留空间、是否需要隐藏内容但保留布局，或者是否需要考虑可访问性和事件响应情况