CSS隐藏页面元素的方法总结

1. display: none：

• 不占据空间：元素被完全移除，不再占据文档流中的位置，因此不会影响其他元素的布局。
• 脱离文档流：元素被脱离文档流，不再影响其他元素的位置。
• 无响应事件：元素被隐藏，无法触发鼠标点击、键盘事件等。
• 会回流重绘：因为元素被完全移除，所以会触发页面的回流和重绘。

2. visibility: hidden：

• 占据空间：元素仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
• 无响应事件：虽然元素不可见，但仍然存在于页面中，因此无法触发事件。
• 只会重绘：因为元素仍然存在，只是不可见，所以只会触发重绘，而不会触发回流。

3. opacity: 0：

• 占据空间：元素仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
• 有响应事件：元素虽然不可见，但仍然存在于页面中，因此可以触发事件。
• 回流重绘 || 只会重绘：根据具体情况而定。如果元素是被隐藏的初始状态，那么会触发回流和重绘；如果是在动画过程中改变透明度，可能只会触发重绘。

4. position: absolute; left: -9999px：

• 占据空间：元素虽然被移出可视区域，但仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
• 脱离文档流：元素被脱离了文档流，不再影响其他元素的位置。
• 无响应事件：元素不可见，无法触发事件。
• 会回流重绘：因为元素的位置发生了改变，会触发页面的回流和重绘。

5. clip-path: polygon(0 0, 0 0, 0 0, 0 0)：

• 占据文档流：元素仍然存在于文档流中，保留了其原本的空间，因此会影响其他元素的布局。
• 无响应事件：元素不可见，无法触发事件。
• 只会重绘：因为元素仍然存在，只是被裁剪成不可见的形状，所以只会触发重绘，而不会触发回流。