在CSS中，隐藏元素是一个常见的需求，而选择哪种隐藏方式则取决于具体的应用场景。display: none是一个常用的隐藏方法。一旦某个元素的样式被设置为display: none，那么这个元素及其所有后代元素都会立即从页面上消失，没有任何过渡效果。同时，该元素原本占据的空间也会被其他元素占据，这会导致浏览器的文档重排和重绘。此外，当元素被隐藏后，其及其后代元素上绑定的所有事件都将不再被触发。
例如，如果我们想隐藏一个名为"元素A"的元素，可以这样设置其样式：
```css
.eleA {
display: none;
}
```
这样，元素A就会从页面上完全消失，并且其原本占据的空间会被其他元素所占据。同时，与元素A相关的事件也都不会再被触发。
❒ visibility: hidden的特性
与display: none不同，设置为visibility: hidden的元素虽然在视觉上被隐藏，但其占据的空间仍然保留在页面上。这意味着DOM节点并未真正移除，只是处于不可见状态，因此不会引发浏览器的重排。然而，重绘通常还是会发生的。值得注意的是，visibility属性具有继承性。也就是说，如果给一个父元素设置了visibility: hidden，那么它的所有子元素都会继承这个设置。但与display: none不同的是，子元素可以通过单独设置visibility: visible来恢复可见性。
此外，当元素的visibility设置为hidden时，该元素及其所有后代元素上绑定的事件将不再被触发。这一点与display: none的效果相似。
❒ opacity: 0的视觉影响
当元素的opacity被设置为0时，它会变得完全透明，从而在视觉上不可见。但重要的是要明白，这并不会真正移除元素或触发重排。虽然如此，由于元素的不透明度发生了变化，通常会导致重绘。此外，与visibility属性不同，设置opacity: 0并不会影响元素所绑定事件的触发。同时，与visibility类似的是，对设置opacity: 0的父元素，将其子元素的opacity设为1并不会使该子元素变得可见。
- }
02其他隐藏方法与场景
❒ 绝对定位隐藏原理
使用绝对定位隐藏元素的方法相当直接，它通过将元素移出其容器范围来实现隐藏效果，这种做法既简单又有效。通过将元素的top和right属性都设置为9999px，我们可以将该元素移动到屏幕之外，从而实现完全的隐藏。
position: absolute通过偏移远距离使元素脱离可见区域，简单有效。值得注意的是，这种方式不会改变元素在DOM树中的顺序，只会使它在视觉上不可见。
❒ clip-path与裁剪效果
另一种隐藏元素的方法是利用clip-path 属性进行裁剪。通过这个属性，我们可以创建一个仅允许元素部分区域显示的剪切区域，从而实现区域内显示、区域外隐藏的效果。例如，使用-webkit-clip-path: polygon(100px 0px, 200px 25px, 100px 50px, 0px 25px);，我们就可以轻松地裁剪出一个菱形区域，实现元素的隐藏。
当元素的clip-path属性设置为一个区域面积为零的剪切路径时，该元素将呈现为不可见状态。clip-path通过限制显示区域来隐藏元素 ，与小区域剪切路径可实现完全隐藏。值得注意的是，可以通过手动触发的方式来模拟点击事件。此外，还有另一种方法，即将影响元素盒模型的样式，如width、height、padding、border等，全部设置为0，同时确保当元素包含子元素时，将overflow属性设置为hidden。
https://ds.163.com/article/6a088ba708bdb823bfadc2ef/
https://ds.163.com/article/6a088ba66f4fc46e0e76204e/
https://ds.163.com/article/6a088b725bed636bcbbe67d2/
https://ds.163.com/article/6a088b71e2380f61e70925f9/
https://ds.163.com/article/6a088b7027132700c515fdba/
https://ds.163.com/article/6a088b3a5bed636bcbbe6741/
https://ds.163.com/article/6a088b3a6f4fc46e0e761f39/
https://ds.163.com/article/6a088b39b44ac34100f48449/
https://ds.163.com/article/6a088b02e7aee1305d720420/
https://ds.163.com/article/6a088b026f4fc46e0e761eb6/
https://ds.163.com/article/6a088b02edca3a0ca6b91493/
https://ds.163.com/article/6a088acc03d58009654685a7/
https://ds.163.com/article/6a088acbe7aee1305d72038a/
https://ds.163.com/article/6a088acc6f4fc46e0e761e28/
https://ds.163.com/article/6a0889cf81cdff073461730a/
https://ds.163.com/article/6a0889cfb6f80e195603edf1/
https://ds.163.com/article/6a0889ce250ef456074cb1cb/
https://ds.163.com/article/6a08890d27132700c515f8cb/