visibility: hidden ，opacity display:none

这三个CSS属性都可以用于隐藏元素，但有一些区别：

1. `visibility: hidden`：元素不可见，但仍占用布局空间，即元素仍然存在于DOM中，可以通过更改CSS属性或通过JavaScript让其可见。

2. `opacity: 0`：元素透明度为0，即元素不可见，但仍占用布局空间，即元素仍然存在于DOM中，可以通过更改CSS属性或通过JavaScript让其可见。

3. `display: none`：元素不可见，且不占用布局空间，即元素在DOM中不存在，也不能通过JavaScript让其可见，要让其重新出现，必须更改CSS属性或通过JavaScript重新创建元素并添加到DOM中。

因此，在使用这些属性时，需要根据实际需求进行选择。如果需要隐藏元素但仍占用布局空间，则使用`visibility: hidden`或`opacity: 0`；如果需要完全移除元素并释放布局空间，则使用`display: none`。

相关问题

display:none和visibile:hidden opacity0重绘重排

`display:none`和`visibility:hidden`以及`opacity:0`在页面中都可以隐藏元素，但它们的实现方式不同，会对页面的重绘重排产生不同的影响。

`display:none`会将元素从文档流中完全删除，这会导致元素不再占据任何空间，而且会导致页面的重排和重绘。

`visibility:hidden`会将元素隐藏起来，但是元素依然占据着原来的空间，这也会导致页面的重排和重绘。

`opacity:0`会将元素变得透明，但元素依然占据着原来的空间，这同样会导致页面的重排和重绘。

因此，如果需要在页面中隐藏元素，可以根据实际需要选择不同的方式。如果需要隐藏的元素不再需要使用，可以使用`display:none`；如果需要隐藏的元素需要重新显示，可以使用`visibility:hidden`或者`opacity:0`。但是需要注意，使用`display:none`将导致元素完全从文档流中删除，可能会影响到其他元素的布局，因此在使用时需要谨慎考虑。

visibility：hidden 占位？

使用 `visibility: hidden` 属性会将元素隐藏，但是该元素在页面中仍会占据原有的空间，因此不会影响其他元素的布局。

这与使用 `display: none` 属性不同，`display: none` 会将元素隐藏，并且在页面中不再占据任何空间。

如果要同时隐藏元素并且不占用空间，可以使用 `opacity: 0` 或 `position: absolute; left: -9999px;` 等方法来实现。