隐藏元素的方法
在CSS中，隐藏元素可以通过多种方式实现，主要有以下几种方法：
使用
display属性：- 将元素的
display属性设置为none可以完全隐藏元素，并且该元素不会占据任何空间。
css.hidden { display: none; }- 将元素的
使用
visibility属性：- 将元素的
visibility属性设置为hidden也可以隐藏元素，但是与display: none;不同的是，元素仍然会占据页面上的空间。
css.invisible { visibility: hidden; }- 将元素的
使用
opacity属性：- 将元素的
opacity属性设置为0可以使元素完全透明，元素虽然不可见，但仍然占据空间并且可以交互（例如，可以点击）。
css.transparent { opacity: 0; }- 将元素的
使用
position属性：- 通过设置元素的
position属性为absolute或fixed并将其移出可视区域，也可以实现隐藏效果。这种方法较少使用，因为它可能会影响布局。
css.offscreen { position: absolute; left: -9999px; }- 使用
clip-path属性来定义元素的剪切路径。在这段代码中，剪切路径被设置为circle(0)，即一个半径为0的圆形。这样，元素的内容将被剪切掉，只显示圆形路径内的部分，从而实现了隐藏元素的效果。
css.offscreen { position: absolute; clip-path: circle(0); }- 通过设置元素的
根据你的需求选择合适的方法。如果你想要元素从文档流中完全消失，使用 display: none; 是最好的选择。如果你只是想让元素不可见但仍占据空间，可以使用 visibility: hidden; 或 opacity: 0;。
示例代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.red{
width: 100px;
height: 100px;
background-color: red;
}
.box{
width: 100px;
height: 100px;
/* 隐藏，不占据空间，按钮不可点击 */
/* display: none; */
/* 隐藏，不占据空间，按钮不可点击 */
/* position: absolute;
clip-path: circle(0); */
/* 隐藏，不占据空间，按钮不可点击 */
/* position: absolute;
left: -9999px; */
/* 隐藏，占据空间，按钮不可点击 */
/* visibility: hidden; */
/* 透明度为0，占据空间，按钮可点击 */
/* opacity: 0; */
}
.blue{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="red">
red
</div>
<button class="box">
点击
</button>
<div class="blue">
blue
</div>
<script>
const box = document.querySelector('.box');
let num = 0;
function btn(){
num++;
console.log(num)
}
box.addEventListener('click',btn)
</script>
</body>
</html>补充知识
理解display: none; 和 visibility: hidden;
display:none：
① 设置了display: none;属性的元素会被构建为DOM树，而display:none样式的加载在后面一步； DOM树和CSSOM树合并成的render树不会包含隐藏的元素，因为这些元素不会用于呈现； 浏览器会按照render树进行布局（Layout）时，就不会给此元素进行排列，也就不占据空间了。
② 由于元素隐藏，且不占用空间，改变了页面的布局，所以会发生回流。
visibility:hidden：
① 设置了visibility: hidden;属性的元素会被合并渲染到render树中； 浏览器会按照render树进行布局（Layout），所以此元素也就会占据空间。
② 由于元素隐藏，会发生重绘，不过元素仍占用空间，所以不用重新计算布局，也就不会造成回流。